根據表格數據分割表格行

Question

正在制作包含1到31個數據的表格。 現在我想，當一行中充滿七個數字時，它應該自動添加新行並在其中插入數字，並且應該繼續到表完成為止。 我的意思是，它將首先從1插入到7，然后應添加下一行，數據以8開頭，而15之后是新的一行。 像日歷一樣的東西。

請參見下面的代碼段。

 var myDays = ["SUN", "MON", "TUE", "WED", "THU", "FRI", "SAT"]; var tableHeader = ""; var tableData = ""; var tableRow = ""; for (j = 1; j < 32; j++) { tableData += "<td>" + j + "</td>"; } document.getElementById("days").innerHTML = tableData; 

 #days, th, td { border: 1px solid black; border-collapse: collapse; } #days { width: 50%; text-align: center; } 

 <table id="days"></table> 

Answer 1

有一個用於控制行的外循環，和一個用於添加每個<td>元素的內循環。 您可以通過基於外循環索引的倍數偏移元素來控制內循環中元素的值。

基本上，如果j是您的內部循環的索引，而i是您的外部循環的索引，則取i的倍數（在本例中為i*7 ）並使j的開頭偏移那個。 請參見下面的代碼示例。

 var myDays = ["SUN", "MON", "TUE", "WED", "THU", "FRI", "SAT"]; var tableHeader = ""; var tableData = ""; var tableRow = ""; for (var i=0; i<32/7; i++) { var k = i * 7; tableData += "<tr>"; for (var j = 1 + k; j <= 7 + k; j++) { if (j > 31) break; tableData += "<td>" + j + "</td>"; } tableData += "</tr>"; } document.getElementById("days").innerHTML = tableData; 

 #days, th, td { border: 1px solid black; border-collapse: collapse; } #days { width: 50%; text-align: center; } 

 <table id="days"></table> 

Answer 2

你可以試試這個答案

counter=0;
tableData+='<tr>';
            for(j=1; j<32; j++){
            if(counter==7)
            {
                tableData+='</tr>';
                counter=0;
            }
            tableData+= "<td>" + j + "</td>";
            ++counter;
        }