Menu
I am just doing a Javascript excercise which should add a row into a table. Html reads like this:
<!DOCTYPE html>
<html><head><br><meta charset=utf-8 />
</head><body>
<table id="sampleTable" border="1">
<tr><td>Row1 cell1</td>
<td>Row1 cell2</td></tr>
<tr><td>Row2 cell1</td>
<td>Row2 cell2</td></tr>
</table><br>
<input type="button" onclick="insert_Row()" value="Insert row">
</body></html>
And my script that doesn't work:
function insert_Row(){
var xTable=document.getElementById('sampleTable');
for (i=0;i<=xTable.children.length;i++)
{
if(i===xTable.children.length)
{
xTable.createElement('tr');
tr.innerHTML ='<td>cell1</td><td>cell2</td>'
}
}
}
This is the correct solution:
function insert_Row()
{
var x=document.getElementById('sampleTable').insertRow(0);
var y = x.insertCell(0);
var z = x.insertCell(1);
y.innerHTML="New Cell1";
z.innerHTML="New Cell2";
}
I would like to understand what is wrong with my first solution? Why doesn't it create the tag but throws error instead?
640
You never add the row to the table. The createElement does not attach itself to anything. You would need to use appendChild() or insertBefore()
var table = document.getElementById("sampleTable"),
tbody = table.getElementsByTagName("tbody")[0];
for (var i=0;i<5;i++) {
var row = document.createElement("tr");
var cell1 = document.createElement("td");
var cell2 = document.createElement("td");
cell1.innerHTML = i + "- 1";
cell2.innerHTML = i + "- 2";
row.appendChild(cell1);
row.appendChild(cell2);
tbody.appendChild(row);
}<table id="sampleTable" border="1">
<tbody>
<tr>
<td>Row1 cell1</td>
<td>Row1 cell2</td>
</tr>
<tr>
<td>Row2 cell1</td>
<td>Row2 cell2</td>
</tr>
</tbody>
</table>your xTable.createElement is not creating any child element.The actual method is document.createElement().There is no element.createElement
again parentnode.children is accessing only the elements which is a direct children of table element which is tBody element.So, parentnode.children.length is equal to 1 here.But it will increase after adding another tr element as it was not added to tbody element.Thus it makes the for loop infinite.I will discuss it shortly.
also you have to use element.appendChild() method to appedn the child you
have already created.To add table cells don't use innerHTML,rather
use dom methods to do this things for you
The for loop in your code is getting infinite, because after adding one tr element to your table, xTable.children.length is increased by one.So,every time the for loop is executed it finds that the length is increased and after adding another tr element it increases once again. So,it never gets any chance to break.Thus become infinite loop.So careful when using for loop to add element to table
var xTable=document.getElementById('sampleTable');
var tr=document.createElement('tr');
tr.innerHTML ='<td>cell1</td><td>cell2</td>'
xTable.appendChild(tr);
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
