how to create html table rows from multiple arrays of data in javascript?
Question
I am trying to display data coming in from a Firebase project.
After retrieving the data as a snapshot, I am trying to pull it into a simple HTML table.
I have taken the initial data and extracted 3 arrays just of the values I need to display, eg
["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:
title1 - author1 - year1
title2 - author2 - year2
etc.
2 answers
solution1
1 ACCPTED 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"
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 :
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>
solution2
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.
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] ]));
}
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.