IE6-IE9兼容性问题列表及解决办法:锁表头的JQuery方案和非JQuery方案(不支持IE6,7,8)
鉴于从IE8开始,IE不再支持css的expression了,所以以前依靠它完成锁表头的代码就全部失效了,面对新的浏览器,一切又要重新来过了。
现在所能找到的对于锁表头的方案主要有两种路子:一种是使用JQuery,另一种是使用纯js的,因各个公司情况不一样,各取所需吧!
而这两条路中每一条又带有多种实现思路,先仅举两个思路如下:
1.另外拷贝一份table的head,然后将它安置在table的最上面,这样改动量较大。
2.不拷贝head, 想法把table的head固定在最上面,这样改动量小些。
下面介绍的两个方案:JQuery方案和非JQuery方案(纯js),都是基于思路2的,即不拷贝head, 直接把table的head固定在最上面。
1.JQuery方案
1.1 页面引入jquery.js库
<script src="jquery-1.7.1.js" type="text/javascript"></script>
1.2 添加两个js函数
添加LockTableHead()和translate()函数。
注意:为防止JQuery与现有js框架抢夺$标识符,要执行jQuery.noConflict()。
<script type="text/javascript">
function LockTableHead(divId, tableId) {
var jq = jQuery.noConflict();
jq("#" + divId).scroll(function () {
var delta = jq("#" + divId).scrollTop();
if (delta > 0) {
translate(jq("#" + tableId + " th"), 0, delta - 2);
}
else {
translate(jq("#" + tableId + " th"), 0, 0);
}
});
} function translate(element, x, y) {
var translation = "translate(" + x + "px," + y + "px)"
element.css({
"transform": translation,
"-ms-transform": translation,
"-webkit-transform": translation,
"-o-transform": translation,
"-moz-transform": translation
});
}
</script>
1.3 修改页面,调用js
在适当的地方添加LockTableHead()函数调用即可。
如下:
<button onclick="LockTableHead('grid','T000000');" name="b1" type="button">button</button>
注意:要提供一个div的id和table的id 。
2.非JQuery方案(纯js)
2.1 思路
受JQuery方案的启发,将它翻译回普通js即可。
2.2 添加js函数
添加LockTableHead()函数。
function LockTableHead(divId, tableId) {
document.getElementById(divId).onscroll = function () {
var delta = document.getElementById(divId).scrollTop;
var t1 = "translate(0px," + delta + "px)";
th_Array = document.getElementById(tableId).getElementsByTagName("th");
for (i = 0; i < th_Array.length; i++) {
th_Array[i].style["-ms-transform"] = t1;
}
};
}
2.3 修改页面,调用js
同上,在适当的地方添加LockTableHead()函数调用即可。
如下:
<button onclick="LockTableHead('grid','T000000');" name="b1" type="button">button</button>
注意:要提供一个div的id和table的id 。
3.总结
以上两方案实际上都是使用了css3中的translate函数,这就意味着浏览器得支持这个功能是前提条件。
另外,如果页面上只有一个table,也可以通过getElementsByTagName的方式定位table,并用parentNode的方式定位div,这样就不必传递它们的id了。
最新文章
- python之RabbitMQ
- 测试Open Live writer
- SQL server 数据库连接方式分析
- HDU 4286 Data Handler --双端队列
- Python 科学计算涉及模块
- 将自定义的 service provider 绑定到 IOC 容器
- 怎样调整CODESOFT中条码线的宽度
- android 64位的so文件 报错
- php class类的用法详细总结
- Spring切面编程步骤
- video视频铺满
- springMVC源码分析--拦截器HandlerExecutionChain(三)
- android自定义xmls文件属性
- Azure KeyVault设置策略和自动化添加secrets键值对
- JQuery动画详解(四)
- 修复python命令行下接收不到参数的问题
- Ubuntu Git安装与使用
- ruby部署之Heroku
- 五个瓶颈影响你的Asp.Net程序(网站)性能
- js下拉框二级关联菜单效果代码具体实现