Solved

dynamically add row to middle of table

Posted on 2007-03-28
11
1,236 Views
Last Modified: 2008-02-01
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.    
0
Comment
Question by:ICPooreman
  • 5
  • 5
11 Comments
 
LVL 28

Accepted Solution

by:
TName earned 500 total points
ID: 18808468
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
 
LVL 28

Expert Comment

by:TName
ID: 18808536
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
 

Author Comment

by:ICPooreman
ID: 18808661
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
 
LVL 28

Expert Comment

by:TName
ID: 18808919
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
 

Author Comment

by:ICPooreman
ID: 18809180
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
How your wiki can always stay up-to-date

Quip doubles as a “living” wiki and a project management tool that evolves with your organization. As you finish projects in Quip, the work remains, easily accessible to all team members, new and old.
- Increase transparency
- Onboard new hires faster
- Access from mobile/offline

 
LVL 28

Expert Comment

by:TName
ID: 18809516
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
 
LVL 28

Expert Comment

by:Pravin Asar
ID: 18809902
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
 
LVL 28

Expert Comment

by:TName
ID: 18810113
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
 

Author Comment

by:ICPooreman
ID: 18810134
>>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
 

Author Comment

by:ICPooreman
ID: 18810150
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
 

Author Comment

by:ICPooreman
ID: 18811497
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

Featured Post

Enabling OSINT in Activity Based Intelligence

Activity based intelligence (ABI) requires access to all available sources of data. Recorded Future allows analysts to observe structured data on the open, deep, and dark web.

Join & Write a Comment

Suggested Solutions

Today I would like to talk about localizing (Internationalization) JavaScript applications. Introduction When creating an application that is going to be used by many people around the globe, it is important to remember that not everyone speak…
Avoid defining the variables in the global scope; trying to define them in a local function scope. Because:   • Look-up is performed every time a variable is accessed.   • Variables are resolved backwards from most specific to least specific scope…
The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)
The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…

747 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question

Need Help in Real-Time?

Connect with top rated Experts

11 Experts available now in Live!

Get 1:1 Help Now