Create table using JavaScript function

Stack Overflow is a question and answer site for professional and enthusiast programmers.
It's 100% free, no

registration required.
Create table using Javascript
I have a JavaScript function which creates a table with 3 rows 2 cells.

Could anybody tell me how I can create the table below using my function (i need to do this for my
situation)?
My HTML:
<table width="100%" border="1">
<tr>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td rowspan="2"> </td>
</tr>
<tr>
<td> </td>
</tr>
</table>
JavaScript:
function tableCreate() {
//body reference
var body = document.getElementsByTagName("body")[0];
// create elements <table> and a <tbody>
var tbl
= document.createElement("table");
var tblBody = document.createElement("tbody");
// cells creation
for (var j = 0; j <= 2; j++) {
// table row creation
var row = document.createElement("tr");
for (var i = 0; i < 2; i++) {
// create element <td> and text node
//Make text node the contents of <td> element
// put <td> at end of the table row
var cell = document.createElement("td");
var cellText = document.createTextNode("cell is row "+j+", column "+i);
cell.appendChild(cellText);
row.appendChild(cell);
}
//row added to end of table body
tblBody.appendChild(row);
}
// append the <tbody> inside the <table>
tbl.appendChild(tblBody);
// put <table> in the <body>
body.appendChild(tbl);
// tbl border attribute to
tbl.setAttribute("border", "2");
}
javascript
html
table
asked Feb 1 '13 at 9:54

Manny Fitzgerald
102
4 Answers
This should work (from a few alterations to your code above).

function tableCreate(){
var body=document.getElementsByTagName('body')[0];
var tbl=document.createElement('table');
tbl.style.width='100%';
tbl.setAttribute('border','1');
var tbdy=document.createElement('tbody');
for(var i=0;i<3;i++){
var tr=document.createElement('tr');
for(var j=0;j<2;j++){
if(i==2 && j==1){
break
} else {
var td=document.createElement('td');
td.appendChild(document.createTextNode('\u0020'))
i==1&&j==1?td.setAttribute('rowSpan','2'):null;
tr.appendChild(td)
}
}
tbdy.appendChild(tr);
}
tbl.appendChild(tbdy);
body.appendChild(tbl)
}
answered Feb 1 '13 at 9:55

Craig Taub
2,596
15
Good solution, but it's best to create the variables outside of the loop Oz Lodriguez Oct 12 '14 at 10:25
Slightly shorter code using
instertRow
and
insertCell
function tableCreate(){
var body = document.body,
tbl = document.createElement('table');
tbl.style.width = '100px';
tbl.style.border = "1px solid black";
for(var i = 0; i < 3; i++){
var tr = tbl.insertRow();
for(var j = 0; j < 2; j++){
if(i == 2 && j == 1){
break;
} else {
var td = tr.insertCell();
td.appendChild(document.createTextNode('Cell'));
td.style.border = "1px solid black";
if(i == 1 && j == 1){
td.setAttribute('rowSpan', '2');
}
}
}
}
body.appendChild(tbl);
}
tableCreate();
Also, this doesn't use some "bad practices", such as setting a border attribute instead of
using CSS, and it accesses the body through document.body instead of
document.getElementsByTagName('body')[0] ;
edited Dec 4 '14 at 10:10
answered Feb 1 '13 at 10:38

Cerbrus
4
22.7k
26
55
<html>
<head>
<meta httpequiv="ContentType" content="text/html; charset=ISO88591">
<title>Insert title here</title>
</head>
<body>
<table id="myTable" cellpadding="2" cellspacing="2" border="1" onclick="tester()">
</table>
<script>
var student;
for(var j=0;j<10;j++)
{
student = {
name : "Name"+j,
rank: "Rank"+j,
stuclass:"Class"+j,
};
var table = document.getElementById("myTable");
var row = table.insertRow(j);
var cell1 = row.insertCell(0);
cell1.innerHTML =student.name,
cell2.innerHTML =student.rank,
cell3.innerHTML=student.stuclass;
}
</script>
</body>
</html>
answered Jul 3 '14 at 17:36

user3802764
11
<!DOCTYPE html>
<html>
<body>
<p id="p1">
<b>Enter the no of
<br/><br/>
<table>
<tr>
<th>No. of
<th>No. of
</tr>
<tr>
<td><input
<td><input
</tr>
</table>
row and column to create table:</b>
Row(s) </th>
Column(s)</th>
type="text" id="row" value="4" /> X</td>

type="text" id="col" value="7" />Y</td>
<br/>
<button id="create" onclick="create()">create table</button>
</p>
<br/><br/>
<input type="button" value="Reload page" onclick="reloadPage()">
<script>
function create() {
var row = parseInt(document.getElementById("row").value);
var col = parseInt(document.getElementById("col").value);
var tablestart="<table id=myTable border=1>";
var tableend = "</table>";
var trstart = "<tr bgcolor=#ff9966>";
var trend = "</tr>";
var tdstart = "<td>";
var tdend = "</td>";
var data="data in cell";
var str1=tablestart + trstart + tdstart + data + tdend + trend + tableend;
document.write(tablestart);
for (var r=0;r<row;r++) {
document.write(trstart);
for(var c=0; c<col; c++) {
document.write(tdstart+"Row."+r+" Col."+c+tdend);
}
}
document.write(tableend);
document.write("<br/>");
var s="<button id="+"delete"+" onclick="+"deleteTable()"+">Delete top Row
</button>";
document.write(s);
var relod="<button id="+"relod"+" onclick="+"reloadPage()"+">Reload Page
</button>";
document.write(relod);
}
function deleteTable() {
var dr=0;
if(confirm("It will be deleted..!!")) {
document.getElementById("myTable").deleteRow(dr);
}
}
function reloadPage(){
location.reload();
}
</script>
</body>
</html>
edited Dec 3 '14 at 13:02
answered Jun 29 '13 at 10:38
Community
Rajiv
239

Create table using JavaScript function

Uploaded by

Document Information

Original Description:

Original Title

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

Create table using JavaScript function

Uploaded by

Copyright:

Available Formats

Stack Overflow is a question and answer site for professional and enthusiast programmers.

It's 100% free, no

Create table using Javascript

I have a JavaScript function which creates a table with 3 rows 2 cells.

asked Feb 1 '13 at 9:54

This should work (from a few alterations to your code above).

answered Feb 1 '13 at 9:55

Slightly shorter code using

answered Feb 1 '13 at 10:38

answered Jul 3 '14 at 17:36

row and column to create table:</b>

type="text" id="row" value="4" /> X</td>

edited Dec 3 '14 at 13:02

answered Jun 29 '13 at 10:38

You might also like