Adding another row in a table using javascript

Question

I have created a table. I need to add a new row using javascript. Can anybody fix it.

<head>
<script>
var num=1;
function addrow(){
    num++;
    var x = document.getElementById("add");
    x.innerHTML= x.innerHTML +"<tr><td>Content_"+num+"</td></tr>";
}
</script>
<title>Add new row with js</title>
</head>
<body>

<table>
<tr><td>Content_1</td></tr>
//* I wanted to add a new row here *//
<tr><td>Content_End</td><td><button onclick="addrow()">+</button></td></tr>
</table>
</body>

I wanted to add a new row in between the rows!! Can anybody help? Thanks in advance!

the above code is looking for the element with id 'add' that does not exists. insert the id 'add' in the html. — Paolo
– Paolo, Commented Jun 23, 2015 at 14:54

Sid M · Accepted Answer · 2015-06-23 14:56:38Z

1

Do it like this

<head>
<script>
var num=1;
function addrow(){

var table = document.getElementById("add");
var row = table.insertRow(num);
var cell1 = row.insertCell(0);
var cell2 = row.insertCell(1);

cell1.innerHTML = "NEW CELL"+num;
cell2.innerHTML = "NEW CELL"+num;
    num++;
}
</script>
<title>Add new row with js</title>
</head>
<body>

<table id="add">
    <tr><td colspan="2">Content_1</td></tr>
    <tr><td>Content_End</td><td><button onclick="addrow()">+</button></td></tr>
</table>
</body>

Fiddle : Demo

answered Jun 23, 2015 at 14:56

Sid M

4,3744 gold badges33 silver badges51 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Mark's Enemy · Accepted Answer · 2015-10-23 05:42:46Z

1

var num=1;
function addrow(){

var table = document.getElementById("add");
var row = table.insertRow(num);
var cell1 = row.insertCell(0);
var cell2 = row.insertCell(1);

cell1.innerHTML = "NEW CELL"+num;
cell2.innerHTML = "NEW CELL"+num;
    num++;
}

This would work :)

answered Oct 23, 2015 at 5:42

Mark's Enemy

891 silver badge8 bronze badges

1 Comment

Kumar Saurabh Over a year ago

Hey welcome to stack, Here only code answer are not well received, If would be great if you can explain your answer also so that others having same problem in future might be benefited,

Ole Spaarmann · Accepted Answer · 2015-06-23 14:42:20Z

0

You forgot to add the id to your table. Also you cannot have different numbers of tds per row. If you want one cell to take the space of two columns then add colspan="2"

<head>
<script>
var num=1;
function addrow(){
    num++;
    var x = document.getElementById("add");
    x.innerHTML= x.innerHTML +"<tr><td>Content_"+num+"</td></tr>";
}
</script>
<title>Add new row with js</title>
</head>
<body>

<table id="add">
    <tr><td colspan="2">Content_1</td></tr>
    <tr><td>Content_End</td><td><button onclick="addrow()">+</button></td></tr>
</table>
</body>

answered Jun 23, 2015 at 14:42

Ole Spaarmann

17k29 gold badges108 silver badges169 bronze badges

2 Comments

Sid M Over a year ago

This will add rows in end not in between

hemnath mouli Over a year ago

I need output such as <tr><td>Content_1</td></tr> <tr><td>Content_3</td></tr> <tr><td>Content_2</td></tr> <tr><td>Content_End</td></tr>

Collectives™ on Stack Overflow

Adding another row in a table using javascript

3 Answers 3

Comments

1 Comment

2 Comments

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

1 Comment

2 Comments

Related