將多次迭代放入div類HTML5

我記得，以下迭代方案會生成一個矩陣。在我的情況下，5x5將多次迭代放入div類HTML5

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類中？

來源

2014-02-21 user2948897

你想'div'作爲腳本的一部分嗎？你想把內容插入exisig'div'嗎？你有什麼試着去約會，出了什麼問題？ –

DigitalFront已經想通了。感謝您的評論。 – user2948897

事情是這樣的：

<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>

來源

2014-02-21 02:49:58

有趣的是，當我們增加邊距時，背景顏色會調整。 – user2948897

@ user2948897也許你想要填充，而不是邊距？ –

如果你有使用文件撰寫，只想來包裝你表中一個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>');

這個包裝它，並把它的風格，但我可能誤解了你的問題。

來源

2014-02-21 02:54:35 Gisheri

我不會做這樣的說法，我會去是這樣的：

<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/。

來源

2014-02-21 03:17:38

將多次迭代放入div類HTML5

回答

相關問題