[英]how to create html table rows from multiple arrays of data in javascript?
我正在尝试显示来自 Firebase 项目的数据。
将数据作为快照检索后,我试图将其拉入一个简单的 HTML 表中。
我已经获取了初始数据并仅提取了我需要显示的值的 3 个数组,例如
["title1", "title2", "title3"]
["author1", "author2", "author3"]
["1992", "1994", "1987"]
我有一个基本的 javascript 函数,它根据我拉入的数组数量创建表列的数量。我正在努力解决的是如何在 javascript 中构建每一行,因为每一行应该是:
title1 - author1 - year1
title2 - author2 - year2
等等。
例如,您有包含如下信息的数组:
["title1", "title2", "title3"]
["author1", "author2", "author3"]
["1992", "1994", "1987"]
这意味着array[0][0]
-> 指的是"title1"
, array[1][0] -> "author1"
和array[2][0] -> "1992"
在这种情况下,我们将三个单独的数组合并为一个。 让我们假设这个数组的length
是相同的->
在这种情况下3
:
function buildData()
{
var array = [["title1", "title2", "title3"],
["author1", "author2", "author3"],
["1992", "1994", "1987"]];
var table = document.createElement("table");
var trOne = document.createElement("tr");
var thOne = document.createElement("th");
thOne.innerHTML = "Title";
var thTwo = document.createElement("th");
thTwo.innerHTML = "Author";
var thThree = document.createElement("th");
thThree.innerHTML = "Year";
trOne.appendChild(thOne); trOne.appendChild(thTwo);
trOne.appendChild(thThree);
table.appendChild(trOne);
//We created header row and now we will create rows from your array
for(var i = 0; i < array[0].length; i++)
{
var trTwo = document.createElement("tr");
var tdOne = document.createElement("td");
tdOne.innerHTML = array[0][i]; //titles
var tdTwo = document.createElement("td");
tdTwo.innerHTML = array[1][i]; //authors
var tdThree = document.createElement("td");
tdThree.innerHTML = array[2][i]; //years
trTwo.appendChild(tdOne); trTwo.appendChild(tdTwo);
trTwo.appendChild(tdThree);
table.appendChild(trTwo);
}
document.body.appendChild(table);
}
<script> function buildData() { var array = [["title1", "title2", "title3"], ["author1", "author2", "author3"], ["1992", "1994", "1987"]]; var table = document.createElement("table"); var trOne = document.createElement("tr"); var thOne = document.createElement("th"); thOne.innerHTML = "Title"; var thTwo = document.createElement("th"); thTwo.innerHTML = "Author"; var thThree = document.createElement("th"); thThree.innerHTML = "Year"; trOne.appendChild(thOne); trOne.appendChild(thTwo); trOne.appendChild(thThree); table.appendChild(trOne); //We created header row and now we will create rows from your array for(var i = 0; i < array[0].length; i++) { var trTwo = document.createElement("tr"); var tdOne = document.createElement("td"); tdOne.innerHTML = array[0][i]; //titles var tdTwo = document.createElement("td"); tdTwo.innerHTML = array[1][i]; //authors var tdThree = document.createElement("td"); tdThree.innerHTML = array[2][i]; //years trTwo.appendChild(tdOne); trTwo.appendChild(tdTwo); trTwo.appendChild(tdThree); table.appendChild(trTwo); } document.body.appendChild(table); } </script> <body onload='buildData();'> </body>
一个简单的行生成器:
function rowInstance(rowData) {
var row = elementInstance("TR");
var len = rowData.length;
for(var c = 0; c < len; c++) {
var cell = cellInstance(rowData[c]);
row.appendChild(cell);
}
return row;
}
function cellInstance(cellData) {
var cell = elementInstance("TD");
cell.innerText = cellData;
return cell;
}
function elementInstance(tagName) {
return document.createElement(tagName);
}
将数组传递给 rowInstance(..) ,它将创建并填充一行。
只需将其附加到您喜欢的任何表中:
var table = document.querySelector("#myTable");
table.appendChild(rowInstance([0, "text", 9]));
要循环您的特定数据:
var titles = ["title1", "title2", "title3"];
var authors = ["author1", "author2", "author3"];
var years = ["1992", "1994", "1987"];
var table = document.querySelector("#myTable");
var len = titles.length;
for(var c = 0; c < len; c++) {
table.appendChild(rowInstance([ titles[c], authors[c], years[c] ]));
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.