2014-10-30 72 views
0

它使表格中的数据为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>

+0

你可以把一个'if'条件在循环和执行有所需的逻辑 – 2014-10-30 07:54:02

+0

使用''%模运算来测试你是否达到了7的倍数。 – Barmar 2014-10-30 07:55:08

回答

0

具有用于控制所述行的外环,以及用于将每个<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>

+0

感谢您的帮助 – 2014-10-30 08:06:40

0

你可以试试这个答案

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