Question

我在每四列后创建并关闭tr。我已经就这类问题得到了一些答案，但我发现它是在jquery中完成的。但我必须只在javascript中完成此操作。

我写了一段代码，但似乎不对。 Fiddle

var html= "";
for(var i =0;i<9;i++){
    if(i%4 == 0){
  html+='<tr>';
  }
  html+="<td>"+i+"</td>";
  if(i%4==0 && i!=0 || i == 8){
  html+="</tr>"
  }
}
document.querySelector('#test').innerHTML = html;

Answer 1

问题在于你的结束标记逻辑，它不是在正确的位置添加结束标记。要在右侧位置添加右括号，您可以执行以下操作：

var html= "";
for(var i =0;i<9;i++){
  if(i%4 == 0){
    html+='<tr>';
  }
  html+="<td>"+i+"</td>";
  if(i%4==3){ //this will place the closing tag in the right spot.
     html+="</tr>"
  }
}
document.querySelector('#test').innerHTML = html;

Updated fiddle

Answer 2

每四列后的tr。

＆＃13;

var html= "";
for(var i =0;i<9;i++){
	if(i%4 == 0 && i != 4){
  console.log(i)
  html+='<tr>';
  }
  
  if(i==4 || i == 8){
  console.log(i)
  html+="</tr>"
  }
  if(i==4){
  console.log(i)
  html+="</tr>"
  html+="<tr>"
  }
  html+="<td>"+i+"</td>";
}
document.querySelector('#test').innerHTML = html;

＆＃13;

<table id="test"></table>

＆＃13;

Here is the fiddle,

Answer 3

您可以通过简单地省略th，td和tr元素的结束标记来简化事情，例如

＆＃13;

var html = '<table>';

for(var i=0; i<9; i++){

  if(i%4 == 0) {
    html += '<tr><th>' + i;

  } else {
    html += '<td>' + i;
  }
}
html += '</table>';
document.write(html);

＆＃13;

或者如果您想要更简洁的代码：

＆＃13;

    for(var i=0, html='<table>'; i<9; i++){
      html += (i%4 == 0? '<tr><th>' : '<td>') + i;
    }
    html += '</table>';

document.write(html);

＆＃13;

在javascript中每四列创建一次tr

3 个答案: