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）

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。