table的colspan非常大时的异常

工作中遇到一个情景需要设置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）

table的colspan非常大时的异常

猜你喜欢