Generate HTML table from 2D JavaScript array
Here's a function that will use the dom instead of string concatenation.
function createTable(tableData) {
var table = document.createElement('table');
var tableBody = document.createElement('tbody');
tableData.forEach(function(rowData) {
var row = document.createElement('tr');
rowData.forEach(function(cellData) {
var cell = document.createElement('td');
cell.appendChild(document.createTextNode(cellData));
row.appendChild(cell);
});
tableBody.appendChild(row);
});
table.appendChild(tableBody);
document.body.appendChild(table);
}
createTable([["row 1, cell 1", "row 1, cell 2"], ["row 2, cell 1", "row 2, cell 2"]]);
JavaScript 2D array to table, how to target the table to a div?
Say you had
<div id="MyTargetDiv"></div>
then you need to change
document.body.appendChild(table);
to
document.getElementById("MyTargetDiv").appendChild(table);
Create html table from two array where arrays lengths not necessary the same
The tricky thing here is that 1 array can be longer than the other, so first of all:
- find the largest array's size
- create a loop that will add as many table rows as the longest array size
- add the cell content to each row, handing the case that 1 array might not have any defined values at that particular array index (because different size arrays)
I've added // 1.
// 2.
and // 3.
to help reference the explaination.
const a1 = ['a','b','c']
const a2 = ['d','e','f','g']
const maxArrayLength = Math.max(a1.length, a2.length) // 1.
const tbody = document.querySelector('tbody');
for (let i = 0; i < maxArrayLength; i++) { // 2.
const tr = tbody.insertRow(); // 2.
tr.insertCell().innerHTML = a1[i] ? a1[i] : '' // 3.
tr.insertCell().innerHTML = a2[i] ? a2[i] : '' // 3.
}
<table>
<thead>
<tr>
<th>Col1</th>
<th>Col2</th>
</tr>
</thead>
<tbody>
</tbody>
</table>
Generate html table content with JavaScript array
You can loop over to the array and create a HTML string with <tr>
and <td>
then apply those to the inner HTML of the table
element:
var array = [['name1', 'material1', 'number1', 'place1', 'country1'],['name2', 'material2', 'number2', 'place2', 'country2']];var nHTML = document.querySelector('table').innerHTML;array.forEach(function(arrItem){ var td = '<tr>'; arrItem.forEach(function(item){ td += '<td>'+item+'</td>' ; }); nHTML += td + '</tr>';});document.querySelector('table').innerHTML = nHTML;
<table border='1'> <tr> <th>Name</th> <th>Material</th> <th>Number</th> <th>Place</th> <th>Country</th> </tr></table>
How to create vertical html table from 2d array using javascript
In this answer, I've created an object from your arrays and then made the table from the object:
createTable([ ["Person A", "Person B", "Person C", "Person D"], ["Wed Jun 29 12:30", "Thu Jun 30 13:45", "Thu Jun 30 13:46"," Fri Jul 1 15:40"] ]);
function createTable(tableData) { // Get ready to store the data in an Object var obj = {}; var len = tableData[0].length; // Map Array1 elements as properties and Array2 elements as values for(var i = 0; i < len; ++i){ obj[tableData[0][i]] = tableData[1][i]; } console.log(obj);
var table = document.createElement('table'); // Create the table element table.setAttribute("id", "table"); // Give the table an id attribute var tableBody = document.createElement('tbody'); // Create the tbody element
// Loop over the object, rather than the original arrays: for(var prop in obj) { // Loop through the nested arrays var row = document.createElement('tr'); // Create a row for each nested array var cell = document.createElement('td'); // Make a cell for each element cell.appendChild(document.createTextNode(prop)); // Add the element's data to the cell row.appendChild(cell); // Add the cell to the row cell = document.createElement('td'); // Make a cell for each element cell.appendChild(document.createTextNode(obj[prop])); // Add the element's data to the cell row.appendChild(cell); // Add the cell to the row
tableBody.appendChild(row); // Add the row to the tbody }
table.appendChild(tableBody); // Add the tbody to the table document.body.appendChild(table); // Add the table to the page.}
#table, #table td {border: 1px solid black; }
Make a table using array data in Javascript
Maybe something like that
function populate() {
var table = "";
for (var i in data) {
table += "<td>" +
data[i].name + "</td>" +
"<td>" + data[i].id + "</td>";
table += "</tr>";
document.getElementById("#selectdiv").innerHTML = table;
}
}
Creating html table from multidimensional javascript array
You shouldn't append content like this to your table, because the browser must redraw the whole DOM, so it's not very efficient.
You should build your table inside a string, then append the whole string to your table, like this :
$('#tb').ready(
function() {
console.log('table loaded');
var ar = Array(2);
for(var i=0;i<ar.length;i++){
ar[i]=Array(2);
}
ar[0][0]='1';
ar[1][0]='2';
ar[0][1]='3';
ar[1][1]='4';
console.log('multidimensional array created!');
//Prepare the outputed string
var theTable = "";
for(var j=0;j<ar.length;j++){
theTable += '<tr>';
for(var k=0;k<2;k++){
theTable += '<td>'+ar[k][j]+'</td>';
}
theTable += '</tr>';
}
//Finally appended the whole string to the table
$('#tb').append(theTable);
//expected:
//12
//34
//actual
//1 2 3 4
});
I've made a Jsfiddle for you : JSFiddle
Have fun !
Related Topics
Getting All Selected Checkboxes in an Array
How to Calculate the Latlng of a Point a Certain Distance Away from Another
React - Preventing Form Submission
Why Can't I Update Props in React.Js
Add Event Handler to HTML Element Using JavaScript
What Does $.When.Apply($, Somearray) Do
Higher-Order Functions in JavaScript
Google Maps API - Getting Closest Points to Zipcode
Jquery .On() Method with Multiple Event Handlers to One Selector
How Do Pipes and Monads Work Together in JavaScript
Prevent Jquery UI Dialog from Setting Focus to First Textbox
Method for Streaming Data from Browser to Server via Http
In JavaScript, How to Check If an Array Has Duplicate Values
How to Stop Babel from Transpiling 'This' to 'Undefined' (And Inserting "Use Strict")
Indirect Function Call in JavaScript