Javascript: generate tables

Want to generate a HTML table in Javascript? This is how you do that:

<!DOCTYPE html>
 <meta charset="utf-8">
 <title>Javascript tables</title>

<h1>Javascript generated table</h1>

<table id='mTable' border='1' cellspacing='0' cellpadding='8'></table>


var tabel = document.getElementById("mTable");
var rowOne = tabel.insertRow(0);
var rowOneColumns = [];
rowOneColumns[0] = rowOne.insertCell(0);
rowOneColumns[1] = rowOne.insertCell(1);
rowOneColumns[2] = rowOne.insertCell(2);

var rowTwo = tabel.insertRow(1);
var rowTwoColumns = [];
rowTwoColumns[0] = rowTwo.insertCell(0);
rowTwoColumns[1] = rowTwo.insertCell(1);
rowTwoColumns[2] = rowTwo.insertCell(2);

rowOneColumns[0].innerHTML = "Row One, First Cell"; 
rowOneColumns[1].innerHTML = "Row One, Second Cell"; 
rowOneColumns[2].innerHTML = "Row One, Third Cell"; 
rowTwoColumns[0].innerHTML = "Row Two, First Cell"; 
rowTwoColumns[1].innerHTML = "Row Two, Second Cell"; 
rowTwoColumns[2].innerHTML = "Row Two, Third Cell";


Leave a Reply

Your email address will not be published. Required fields are marked *