如何从javascript中的多个数据数组创建html表行？
[英]how to create html table rows from multiple arrays of data in javascript?
问题描述
I am trying to display data coming in from a Firebase project.
我正在尝试显示来自 Firebase 项目的数据。
After retrieving the data as a snapshot, I am trying to pull it into a simple HTML table.将数据作为快照检索后，我试图将其拉入一个简单的 HTML 表中。
I have taken the initial data and extracted 3 arrays just of the values I need to display, eg我已经获取了初始数据并仅提取了我需要显示的值的 3 个数组，例如
["title1", "title2", "title3"]
["author1", "author2", "author3"]
["1992", "1994", "1987"]
I have a basic javascript function that creates the number of table columns based on the number of arrays I pull in. What I am struggling with is how to build each row in javascript, being that each row should be:我有一个基本的 javascript 函数，它根据我拉入的数组数量创建表列的数量。我正在努力解决的是如何在 javascript 中构建每一行，因为每一行应该是：
title1 - author1 - year1
title2 - author2 - year2
etc.等等。
2 个解决方案
解决方案1
1 已采纳 2017-12-27 22:20:47
For example you have array containing information like this:例如，您有包含如下信息的数组：
["title1", "title2", "title3"]
["author1", "author2", "author3"]
["1992", "1994", "1987"]
This means that array[0][0] -> refers to "title1" , array[1][0] -> "author1" and array[2][0] -> "1992"这意味着array[0][0] -> 指的是"title1" ， array[1][0] -> "author1"和array[2][0] -> "1992"
In this case we have three separate arrays combined into one.在这种情况下，我们将三个单独的数组合并为一个。 Let's assume that the length of this arrays are same -> in this case 3 :让我们假设这个数组的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>
解决方案2
0 2017-12-27 22:25:11
A simple row Generator:一个简单的行生成器：
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);
}
Pass an array to rowInstance(..) and it will create and fill a row.将数组传递给 rowInstance(..) ，它将创建并填充一行。
Just append it to whatever table you like:只需将其附加到您喜欢的任何表中：
var table = document.querySelector("#myTable");
table.appendChild(rowInstance([0, "text", 9]));
To loop your specific data:要循环您的特定数据：
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.