Scribd
Upload
336 views

HTML - Create Table Using Javascript - Stack Overflow

This document discusses creating a table with 3 rows and 2 cells using JavaScript. It provides the asker's existing HTML and JavaScript code to generate a table. Several responders provide suggestions to modify the asker's JavaScript code to generate the specific table structure asked, including adding rowspans and breaks. Suggestions include using insertRow and insertCell methods to simplify the code.

Uploaded by

vijayakumarmani
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
336 views

HTML - Create Table Using Javascript - Stack Overflow

This document discusses creating a table with 3 rows and 2 cells using JavaScript. It provides the asker's existing HTML and JavaScript code to generate a table. Several responders provide suggestions to modify the asker's JavaScript code to generate the specific table structure asked, including adding rowspans and breaks. Suggestions include using insertRow and insertCell methods to simplify the code.

Uploaded by

vijayakumarmani
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 4

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>&nbsp;</td>
<td>&nbsp;</td>
</tr>
<tr>
<td>&nbsp;</td>
<td rowspan="2">&nbsp;</td>
</tr>
<tr>
<td>&nbsp;</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);
var cell2 = row.insertCell(1);
var cell3 = row.insertCell(2);
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

You might also like