工作中遇到一个情景需要设置td的colspan是可变值,根据定制列的多少来设置; 大致如下图(见谅画的丑)
因为table行列太多,导致页面很卡(dom节点太多),但是实际情况中,tbody中的定制列只是一个展示作用,并没有实际内容(这里不考虑重新设计,实时上,应该把固定列和可定制列分开) 针对于这种情况,我将tbody中的可定制列用一个td来实现,设置其rowspan和colspan是其替代位置的行列数,并设置该td的样式背景图和以前的td相同即可达到与之前rowscols个td相同的效果,但是这里只用一个td来替换的,所以dom节点有质的减少。(工作情景最变态大概有上万行上千列,即用1个td替换了百万个td)
简单测试没问题上测试线,发现客户定制的列大于1000时候会出现问题 如下图(这是我写的一个table的demo,后面有该demo的代码)
1,是thead,设置了1100个td 2,是出现问题的地方 3,是设置colspan,rowspan的td 设置了colspan为1100
发现colspan设置大于1000的地方未生效(找遍百度和stackoverflow 没有找到,可能设置这么大colspan的情景几乎没有吧?)
同理测试rowspan没有发现有最大值的限制
demo的代码如下
<html>
<thead>
<style>
.table td{
min-width:50px;
background-color:yellow;
}
</style>
</thead>
<table id="table1" class="table">
</table>
<table id="table2" class="table">
</table>
<script>
var tab = document.querySelector("#table1");
var content = "<tr>";
for(var i=0;i<2200;i++) {
content += "<td>" + (i+1) + "</td>";
}
content += "</tr><tr><td colspan='1100'>code</td></tr>";
tab.innerHTML = content;
tab = document.querySelector("#table2");
var content = "<tr><td>1</td><td rowspan='10000'>rowspan</td></tr>";
for(var i=1;i<10000;i++) {
content += "<tr><td>" + (i+1) + "</td></tr>";
}
tab.innerHTML = content;
</script>
</html>
没有办法,只能在这个td上考虑,既然1个td最大只能设置横跨1000列,那么我用多个不就是几千甚至上万列了吗?
最终代码如下
function completeConfigColBody() {
//Main_Tab: document.getElementById("table1");
var colNum = Main_Tab.rows[0].cells.length, //总共的列数
rowNum = Main_Tab.rows.length; //总共的行数
$(".other_data_zone").remove();
var rowspan = rowNum - 1;
var colspan = colNum - 6; //前六列是固定列
if ($(".data_zone").size() === 0) {
var tdobj = Main_Tab.rows[3].insertCell(6);
$(tdobj).addClass("data_zone");
}
/*td 的colspan 最大值是1000 设置高于1000也只有1000的效果,
所以这里当colspan>1000的时候再增加几个td 如colspan=2300;
那么就有2个other_data_zone 的td, 每个td的colspan=1000,
原始的data_zone colspan设置为300即可*/
var original_data_zone = $(".data_zone");
var data_zone_num = Math.ceil(colspan / 1000);
for (var i = 1; i < data_zone_num; i++) {
tdobj = Main_Tab.rows[3].insertCell(6+i);
$(tdobj).addClass("data_zone").addClass("other_data_zone");
$(tdobj).attr("rowspan",rowspan)
.attr("colspan",1000);
colspan -= 1000;
}
original_data_zone.attr("rowspan", rowspan)
.attr("colspan", colspan);
}
页面效果图如下
1,是项目中的tbody,设置了 3 的样式,即1个td的样式 2,是可定制列的tbody中的1个td 4,是如果td的colspan>1000的时候,辅助的td,具体逻辑在上方代码的注释中很清楚 (因为本地没办法定制大于1000列,所以我测试用的是100列,上方代码是1000)