如何使用JavaScript創建空表數據框？

我希望能夠像這樣創建html表，而不使用任何html，只寫JavaScript。如何使用JavaScript創建空表數據框？

如何使用JavaScript創建空表數據框？

table { 
 
    border: 1px solid black; 
 
    } 
 
th { 
 
    border: 1px solid blue; 
 
    } 
 
td { 
 
    border: 1px solid red; 
 
    }

<!DOCTYPE html> 
 
<html> 
 
<head></head> 
 
<body> 
 
    <table> 
 
    <tr> 
 
     <th>One</th> 
 
     <th>Two</th> 
 
     <th>Three</th> 
 
    </tr> 
 
    <tr> 
 
     <th>A</th> 
 
     <td></td> 
 
     <td></td> 
 
    </tr> 
 
    <tr> 
 
     <th>B</th> 
 
     <td></td> 
 
     <td></td> 
 
    </tr> 
 
    <tr> 
 
     <th>C</th> 
 
     <td></td> 
 
     <td></td> 
 
    </tr> 
 
    </table> 
 
</body> 
 
<html>

來源

2015-04-28 Nathan Brenner

您是否使用裸JavaScript或圖書館像jQuery？ – Crine

這是'

'元素的錯誤HTML語法。 '

'標籤只能用作表格標題單元格。 – wahwahwah

我有jQuery和lodash.js –

回答

試試這個：

var myTableRows = [ 
    [{"th":"One"},{"th":"Two"},{"th":"Three"}], 
    [{"th":"A"},{"td":""},{"td":""}], 
    [{"th":"B"},{"td":""},{"td":""}], 
    [{"th":"C"},{"td":""},{"td":""}] 
]; 

var table = document.createElement("table"); 
for(var rowIndex in myTableRows) { 
    var row = document.createElement("tr"); 
    for(var colIndex in myTableRows[rowIndex]) { 
     for(var tag in myTableRows[rowIndex][colIndex]) { 
      var cell = document.createElement(tag); 
      var cellContents = document.createTextNode(myTableRows[rowIndex][colIndex][tag]); 
      cell.appendChild(cellContents); 
      row.appendChild(cell); 
     } 
    } 
    table.appendChild(row); 
} 
document.body.appendChild(table);

來源

2015-04-28 21:41:36

相關問題