table的colspan很是大时的异常

时间 2019-11-08

标签 table colspan 很是异常繁體版

原文原文链接

工做中遇到一个情景须要设置td的colspan是可变值，根据定制列的多少来设置；大体以下图（见谅画的丑） html

由于table行列太多，致使页面很卡（dom节点太多），可是实际状况中，tbody中的定制列只是一个展现做用，并无实际内容（这里不考虑从新设计，实时上，应该把固定列和可定制列分开）针对于这种状况，我将tbody中的可定制列用一个td来实现，设置其rowspan和colspan是其替代位置的行列数，并设置该td的样式背景图和之前的td相同便可达到与以前rowscols个td相同的效果，可是这里只用一个td来替换的，因此dom节点有质的减小。（工做情景最变态大概有上万行上千列，即用1个td替换了百万个td）dom

简单测试没问题上测试线，发现客户定制的列大于1000时候会出现问题以下图（这是我写的一个table的demo，后面有该demo的代码）测试

1，是thead，设置了1100个td 2，是出现问题的地方 3，是设置colspan，rowspan的td 设置了colspan为1100spa

发现colspan设置大于1000的地方未生效（找遍百度和stackoverflow 没有找到，可能设置这么大colspan的情景几乎没有吧？）设计

同理测试rowspan没有发现有最大值的限制code

demo的代码以下htm

<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列，那么我用多个不就是几千甚至上万列了吗？图片

最终代码以下ip

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);
}

页面效果图以下 rem

1，是项目中的tbody，设置了 3 的样式，即1个td的样式 2，是可定制列的tbody中的1个td 4，是若是td的colspan>1000的时候，辅助的td，具体逻辑在上方代码的注释中很清楚（由于本地没办法定制大于1000列，因此我测试用的是100列，上方代码是1000）