dynamically add row to middle of table

I need to dynamically add a row to the middle of a table using Javascript.  I'm sure this has been asked a million times but all the tutorials i've found insert rows at the end of a table.  I want to dynamically insert a few rows up from the last row of a table.  Can anyone point me to how to do this?

I think I know how but when I run

var tbl = document.getElementById('myTable');
var lastRow = tbl.rows.length;

lastRow will always be 0 even though there are like 8 rows in my table.  I stepped through it with a debugger (venkman) and it's referencing the right table because innerHTML is correct.  Is this "normal" behavior or should the whole table load correctly with the document.getElementById command.

then running
var row = tbl.insertRow(lastRow);
will add a row to the end of the table and putting a -2 sign before it will produce an error.    
ICPooremanAsked:
Who is Participating?
 
TNameConnect With a Mentor Commented:
Hi, here's an example:

<html>
<head>
<script>

function addRow(nr){
  var tbl=document.getElementsByTagName("table")[0];
  var rows = tbl.rows;  
  var aRow = document.createElement('TR');
  aCell=document.createElement('TD');
  aCell.innerHTML='Inserted';
 
  rows[rows.length-nr].parentNode.insertBefore(aRow,rows[rows.length-nr]);
  aRow.appendChild(aCell);
}
</script>
</head>
<body>
<table border="1">
<tr><th>Test 11</th><th>Test 12</th><th>Test 13</th></tr>
<tr><td>Test 21</td><td>Test 22</td><td>Test 23</td></tr>
<tr><td>Test 31</td><td>Test 32</td><td>Test 33</td></tr>
<tr><td>Test 41</td><td>Test 42</td><td>Test 43</td></tr>
</table>
<br>

<input type="button" onClick="addRow(1)">
</body>
</html>
0
 
TNameCommented:
BTW, your lastRow shouldn't be 0. Changed the function to use getElementById and to alert table.rows.length:



<html>
<head>
<style>
</style>
<script>

function addRow(nr){
  var tbl=document.getElementById('myTable');

  alert(tbl.rows.length);

  var rows = tbl.rows;  
  var aRow = document.createElement('TR');
  aCell=document.createElement('TD');
  aCell.innerHTML='Inserted';
 
  rows[rows.length-nr].parentNode.insertBefore(aRow,rows[rows.length-nr]);
  aRow.appendChild(aCell);
}
</script>
</head>
<body>
<table border="1" id="myTable">
<tr><th>Test 11</th><th>Test 12</th><th>Test 13</th></tr>
<tr><td>Test 21</td><td>Test 22</td><td>Test 23</td></tr>
<tr><td>Test 31</td><td>Test 32</td><td>Test 33</td></tr>
<tr><td>Test 41</td><td>Test 42</td><td>Test 43</td></tr>
</table>
<br>

<input type="button" onClick="addRow(1)">
</body>
</html>
0
 
ICPooremanAuthor Commented:
ok your table function works for your example .... and sort of for mine....  I put my table in your example and it worked perfectly so your answers right.  

However, in my page it still does not render the table correctly (will say there are zero rows still) I think the reason for this has to be because I insert the table with ajax replacing a div's innerHTML attribute.  This probably deserves a new question but any ideas on how to get my browser to render the table correctly in this instance?  I'm going to look into this more so I can post a better comment on what's going on or maybe a solution.
0
Cloud Class® Course: Amazon Web Services - Basic

Are you thinking about creating an Amazon Web Services account for your business? Not sure where to start? In this course you’ll get an overview of the history of AWS and take a tour of their user interface.

 
TNameCommented:
You might be right, allthough -  it *does* work for me with a simple dinamically inserted table:
(click first "Insert table", then "Add row")

<html>
<head>
<script>

function addRow(nr){
  var tbl=document.getElementById('myTable');
  var rows = tbl.rows;  
  var aRow = document.createElement('TR');
  aCell=document.createElement('TD');
  aCell.innerHTML='Inserted';  
  rows[rows.length-nr].parentNode.insertBefore(aRow,rows[rows.length-nr]);
  aRow.appendChild(aCell);
}

function insertTable(id){
   var d=document.getElementById(id);
   d.innerHTML='<table border=1 id="myTable"><tr><th>Test 11</th><th>Test 12</th><th>Test 13</th></tr><tr><td>Test  21</td><td>Test 22</td><td>Test 23</td></tr><tr><td>Test 31</td><td>Test 32</td><td>Test 33</td></tr><tr><td>Test 41</td><td>Test 42</td><td>Test 43</td></tr></table>';
}

</script>
</head>
<body>

<div id="container">
This is where the table will be inserted
</div>

<br>
<input type="button" value="Insert table" onClick="insertTable('container')">
<br>
<input type="button" value="Add row" onClick="addRow(1)">
</body>
</html>

0
 
ICPooremanAuthor Commented:
hmm interesting... Ok I'm probably wrong about it not reading the table correctly because of loading it dynamically.  What could be my problem then...  I look through it with a debugger and it definitely finds the right element (because the innerHTML of the element is correct) but the rows attribute is definitely set to 0 (when it should be 8)... perhaps my table is malformed?  
0
 
TNameCommented:
Is the table being displayed correctöy?
What happens if you try to access one of those rows?
e.g.

alert(tbl.rows[0].cells[0].innerHTML);
0
 
Pravin AsarPrincipal Systems EngineerCommented:
Use insertBefore method


The insertBefore method behaves similarly to the appendChild method, except that you can define before which object to insert the new object. The insertBefore method has two parameter: the child (newly created) object and the brother object:

fatherObj.insertBefore(newObj, brotherObj);



0
 
TNameCommented:
Hi pravinasar,
insertbefore() is indeed used in the example(s) above to insert the row into it's parent object.
AppendChild is only used to add a cell to the row.  
0
 
ICPooremanAuthor Commented:
>>alert(tbl.rows[0].cells[0].innerHTML);

Where I copied and pasted my table in your example the above gave me the value of the cell.  But in my example I get an error.
0
 
ICPooremanAuthor Commented:
It's weird because it sees the table and will even let me append to the end of it but will not let me edit the table itself.  When I append to the end of the table it sets that as row 0 then 1 and so on.
0
 
ICPooremanAuthor Commented:
Ok I figured out the problem.  Apparently my table needed to have the <tbody> attribute included in the table in order to see the rows in the table.  Have I been living under a rock??  I've never encountered the <tbody> attribute before.  I think that combined with the fact that my page was being served up as xhtml instead of html (forgot to mention that whoops) is why I was having the problem.  Thanks for all your help.  
0
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

All Courses

From novice to tech pro — start learning today.