场景说明:
1,当table的展示列很多时,往往希望用户可以动态设置显示或者隐藏部分列。
2,数据是一次性加载完,只是在页面端控制table的隐藏和显示。
3,当你隐藏某一列时,ie8下table不会自适应宽度,会随着列的减少而宽度缩小。
4,当tr是分组行时,展开的下一个tr可能只有一个td,这个时候会发现,两个tr格式不对称(colspan属性)你再次隐藏某一列时,会发现错误格式更明显。
解决方案:
1,列名的显隐,我是通过select选框控制的。下拉框的选项为一个个的checkbox。
2,ie8宽度的自适用问题:
加样式:<table id="tableAlarmWaitFix" style="table-layout: fixed; width: 100%;word-break:break-all;">
ie8兼容:列名隐藏js后添加$('#tableAlarmWaitFix').css("display","inline-table");
window.setTimeout(function(){$('#tableAlarmWaitFix').css("display","");},0);
3,展开tr后样式问题:
//针对点击“+”图标,table列回缩的情况
function clickTableChange(){
var checkednum =$("input[type='checkbox']:checked").length+3;
//ie8会默认每个td都有colspan属性,且值为1。但谷歌和火狐不会($("td[colspan]").length的获取值不一样)。
var mb = myBrowser();
if ("IE" == mb) {
$("#tableAlarmWaitFix").find("tr").each(function(){
if($(this).find("td").length==1){
$(this).find("td").attr("colspan",checkednum);
};
});
}else{
$("td[colspan]").attr("colspan",checkednum);
}
}
function myBrowser(){
var userAgent = navigator.userAgent; //取得浏览器的userAgent字符串
var isOpera = userAgent.indexOf("Opera") > -1; //判断是否Opera浏览器
if (userAgent.indexOf("compatible") > -1 && userAgent.indexOf("MSIE") > -1 && !isOpera) {
return "IE";
}; //判断是否IE浏览器
};
上述js代码的作用就是为了保证tr的宽度一致(如果显示列有8项,展开的tr中只有一项(colspan=8),当你隐藏列后,显示列就只有7项了,但展开项的colspan还是8)