Jquery＆HTML - 動態創建div表

-1

假設我有一個文本框，其中給出了表的尺寸。像2 3Jquery＆HTML - 動態創建div表

現在我需要編寫一個函數，使用這些維度創建一個帶有div標籤的表格。該表已在<div id="output"> - 元素要插入

我想製作字符串osme的for循環看起來像這樣

<div> 
<div> </div> 
<div> </div> 
</div> 
<div> 
... (more columns) 
</div>

所以看起來像DIV標籤，之後的序列我會將其轉換爲html並插入它。

但是沒有更高效的方法嗎？

來源

2015-04-22 Domien

在JavaScript，

在你的HTML，

<input type="number" id="rows" placeholder="Number of rows" /> 
    <input type="number" id="cols" placeholder="Number of cols" /> 
    <input type="button" id="submit" value="Submit" onClick="generateTable();" /> 

    <br> 
    <br> 
    <div id="output"></div>

來源

2015-04-22 18:05:32

事情是這樣的，也許：

var rows = 3; //these would be populated by your text field entries 
 
var columns = 2; 
 

 
function makeTable() { 
 
    html = '<table>'; 
 
    
 
    for(var i=0; i<rows; i++) { \t \t \t \t \t \t 
 
    html += '<tr>'; \t \t \t \t \t \t 
 
    
 
    for(var j=0; j<columns; j++) { 
 
     html += '<td><p>Some Data</p></td>'; 
 
    } 
 
    
 
    html += '</tr>'; 
 
    } 
 
    
 
    html += '</table>'; 
 
    
 
    document.getElementById("output").innerHTML = html; 
 
} \t \t \t

table, td { 
 
    border: 1px solid black; padding: 5px; 
 
}

<!DOCTYPE html> 
 
\t <html> \t 
 
\t \t <head> \t \t 
 
\t \t \t <meta charset="UTF-8"> \t 
 
\t \t \t <title>Table Maker</title> 
 
\t \t </head> 
 
\t \t <body> \t 
 
\t \t \t <div id="output" onClick="makeTable()"><h1>Click me to make a table!</h1></div> \t \t \t 
 
\t \t </body> 
 
\t </html>

來源

2015-04-22 18:18:25 Justin

Jquery＆HTML - 動態創建div表

回答

相關問題