根據表格數據拆分表格的行

它使表格中的數據爲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>

來源

2014-10-30 Brijesh Maurya

你可以把一個'if'條件在循環和執行有所需的邏輯 – 2014-10-30 07:54:02

使用''％模運算來測試你是否達到了7的倍數。 – Barmar 2014-10-30 07:55:08

具有用於控制所述行的外環，以及用於將每個<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>

來源

2014-10-30 08:05:02 nbrooks

感謝您的幫助 – 2014-10-30 08:06:40

你可以試試這個答案

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

來源

2014-10-30 08:06:43 Rasel

根據表格數據拆分表格的行

回答

相關問題