dynamic content in tables

[garry27]

i have a table and two buttons which allow me to move rows up and down a html table.  the code i've used to implement is borrowed from http://friedcellcollective.net/js/SortedTable/Event.js and
http://friedcellcollective.net/js/SortedTable/SortedTable.js

the code in the two scripts use the DOM to retrieve elements from a html table and i haven't had much trouble implementing it to existing html content. however if i change the dom using javascript like when i add new rows to the table using insertRow, the new rows do not inherit the behaviour or presentation. how can i fix it so that new rows inherit the same behaviour of the rows generated with html?

[fenway]

I can't go through two borrowed scripts -- but if you'll post the relevant code snippets, I can probably help you wade though it.

[garry27]

as far as i can tell, the scripts are designed so that they reference the tables by id or if tagname has class 'sort' then they do whatever with what was outputed to the webpage. if you make changes to the dom however, like adding a new row-it treats these differently to the html in the webpage.

a sample of the html table ouputted:

[code]<table id='pubList' class="sorted" width="300px" border="1">
<thead>
  <tr>
    <th  id='PubID' >PubID</th>
    <th  id='Pub' >Pub</th>
    <th  id='Postcode'>Postcode</th>
  </tr>
</thead>
<tbody>
  <tr id='table1_row1'>
    <td>tt</td>
    <td>tt</td>
    <td>tt</td>
  </tr>
  <tr>
    <td>rr</td>
    <td>rr</td>
    <td>rr</td>
  </tr>
  <tr>
    <td>ee</td>
    <td>ee</td>
    <td>ee</td>
  </tr>
 
</table>[/code]

[fenway]

Sounds like you'd have to mark these new DOM items properly, or somehow re-issue a call to whatever function tracks them.

[garry27]

that's what i thought, but i don't understand enough of the code to figure it out.

i'm now going to update the rows on the table as needed rather than insert and delete new rows. this should work just as well if i use a bit of css to hide the empty rows. 

..i'm trying to loop through a table to find the next row with empty td elements. i've put alert events along the way to try and debug it (normally i'd have (txt=='') in the if control structure.

the first alert popup says [object text], the second says undefined. how do i change the code so nextEmptyRow reads the next empty row index or id?

[code]
insRow:function(elm){
  var tbl = elm.parentNode;
  for (var i=0;i<tbl.rows.length;i++) {
    var currTr = tbl.rows[i];
var td = currTr.firstChild;
var txt = td.firstChild;
alert(td);
    if (txt == '3'){
  var nextEmptyRow = tbl.rows[i];
  break;
}
  }
  alert(nextEmptyRow);[/code]

[fenway]

It's a scoping issue, most likely, or you're never getting into that if().