[英]JavaScript printing 2D array into HTML table
我正在使用JavaScript生成一個HTML表,該表打印出2D數組的元素。 我有一個用於創建Headers(columnNames)的數組和一個用於打印每行內容的數組(dataArray)。 到目前為止,我有:
function addTable(columnNames, dataArray) {
var x = document.createElement("TABLE");
x.setAttribute("id", "myTable");
document.body.appendChild(x);
var y = document.createElement("TR");
y.setAttribute("id", "myTr");
document.getElementById("myTable").appendChild(y);
//add column names
for (i = 0; i < columnNames.length; i++) {
var th = document.createElement("TH");
var columns = document.createTextNode(columnNames[i]);
th.appendChild(columns);
document.getElementById("myTr").appendChild(th);
}
這給了我一張桌子:
但是,我現在想遍歷2d數組“ dataArray”,並將所有內容打印成12行。 我有以下算法,但這僅適用於一行。 有人可以幫我嗎?
column = 0;
var y2 = document.createElement("TR");
y2.setAttribute("id", "myTr2");
document.getElementById("myTable").appendChild(y2);
while(column < 8){
var th2 = document.createElement("TD");
var date2 = document.createTextNode(dataArray[0][column]);
th2.appendChild(date2);
document.getElementById("myTr2").appendChild(th2);
column++;
}
我知道我缺少某種行循環,但是到目前為止,已經嘗試並出錯了許多不同的算法,但都沒有運氣。 我想例如有12行。 我為第一個數組索引使用了0,只是為了顯示某些內容,但id理想地希望該值增加到最大數。
HTML中的ID應該是唯一的,但是每行都使用相同的id
: myTr2
。
您已經有了對新創建的行y2
的引用:
y2 = document.createElement("TR");
使用它而不是嘗試使用其非唯一id
:
y2.appendChild(th2);
您還可以參考新創建的表:
var x = document.createElement("TABLE");
您可以類似地引用它,而不是這樣引用它的id:
x.appendChild(y);
在下面的代碼段中,我將變量x
更改為myTable
,並使用嵌套循環遍歷dataArray
而不是使用column
變量:
片段
function addTable(columnNames, dataArray) { var myTable = document.createElement('table'); document.body.appendChild(myTable); var y = document.createElement('tr'); myTable.appendChild(y); for(var i = 0; i < columnNames.length; i++) { var th = document.createElement('th'), columns = document.createTextNode(columnNames[i]); th.appendChild(columns); y.appendChild(th); } for(var i = 0 ; i < dataArray.length ; i++) { var row= dataArray[i]; var y2 = document.createElement('tr'); for(var j = 0 ; j < row.length ; j++) { myTable.appendChild(y2); var th2 = document.createElement('td'); var date2 = document.createTextNode(row[j]); th2.appendChild(date2); y2.appendChild(th2); } } } //addTable addTable(['Date','bbcfour','bbcnews24','bbcone','bbcthree','bbctwo','cbbc','cbeebiese'], [['2009-01','324','1075','940','441','1040','898','1343'], ['2009-02','524','9075','840','341','1140','398','1323'], ['2009-03','224','3075','340','461','1050','828','1345'] ] );
table { border-collapse: collapse; } th, td { padding: 0.3em; border: 1px solid silver; }
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.