Question

我记得，以下迭代方案产生一个矩阵。在我的情况下是5x5

  SCRIPT Language="JavaScript">
  document.write('<table border="1" cellspacing="1" cellpadding="5">')
  for(i = 0; i < 5; i++){
  document.write('<tr>')
    for (j = 0; j < 5; j++){
       document.write('<td>row ' + i + ', column ' + j + '</td>')
    }
    document.write('</tr>')
 }

 document.write('</table>')

 //-->
 </SCRIPT>

我如何将这个包装在设置了边距和背景颜色的div类中？

Answer 1

这样的事情：

<SCRIPT Language="JavaScript">
  document.write('<div style="margin: 10px; background-color: blue;"><table border="1" cellspacing="1" cellpadding="5">')
  for(i = 0; i < 5; i++){
  document.write('<tr>')
    for (j = 0; j < 5; j++){
       document.write('<td>row ' + i + ', column ' + j + '</td>')
    }
    document.write('</tr>')
 }

 document.write('</table></div>')

 //-->
 </SCRIPT>

Answer 2

如果使用document.write，并且只想将表包装在div中，这样就可以了。

document.write('<div class="myclass" style="margin:5px; background-color:#000;">');
document.write('<table border="1" cellspacing="1" cellpadding="5">');
for(i = 0; i < 5; i++){
    document.write('<tr>');
    for (j = 0; j < 5; j++){
       document.write('<td>row ' + i + ', column ' + j + '</td>');
    }
    document.write('</tr>');
}
document.write('</table>');
document.write('</div>');

这包装它并为它添加风格，但我可能误解了你的问题。

Answer 3

我不这样做，我会像：

<div id="divWithTable" class="someClassName"></div>

<SCRIPT Language="JavaScript">
   var ourDiv = document.getElementById("divWithTable");
   var tableHTML = "<table>" 

   for(i = 0; i < 5; i++){
     tableHTML += "<tr>";

     for (j = 0; j < 5; j++){
        tableHTML += "<td>row " + i + ", column " + j + "</td>"
     }

     tableHTML += "</tr>";  
    }

  tableHTML +="</table>";

  ourDiv.innerHTML = tableHTML;

//-->
</SCRIPT>

使用CSS

.someClassName
{
    background-color:#F00;
    margin: 0.5em;
}

 // cellpadding
.someClassName table th, .someClassName table td { padding: 5px; }

// cellspacing
.someClassName table { border-collapse: separate; border-spacing: 5px; }

通过这种方式，您可以保持样式分离并且只更新DOM一次

正如您提出的HTML5问题，请注意许多表格属性为no longer part of the HTML5 spec and shouldn't be used。有关详细信息，请参阅this answer。

在此处查看此行动：http://jsfiddle.net/tbH8y/。

将多次迭代放入div类HTML5中

3 个答案: