Dynamic Tables

[ackitsme]

I have a need to be able to dynamically add rows to a table with a javascript function.

I currently have a function that reads the contents of a table contained in a div, locates the </table> marker, then adds the new row before it. Finally, it writes the new table back to the div.

The problem with this is that it basically forces the table to refresh every time it's rewritten. We use some animated gif's and every time it refreshes, the gif is started over. If multiple lines are added in succession, the gif doesn't get a chance to continue.

Is there a way to do this by, say, placing a div in the middle of a table and doing a outerHTML change that would include the new row and a new <div> tag?

Thanks in advance.

-------------------------------------------------------------------------
Charlie Silverman
Sr. Systems Administrator
Globalstar, LLC

-------------------------------------------------------------------------
We now return you to your regularly scheduled reality.

 

[ackitsme]

Ok, so I did some digging and found out that I can use the following code:

<script language='javascript'>
function addline() {
   var tbl = document.getElementById('mytable');
   var lastRow = tbl.rows.length;

   var newRow = tbl.insertRow(lastRow);

   var cell = newRow.insertCell(0);
   cell.innerHTML = '<b>Blah blah</b>';
   cell.setAttribute("align", "right");
   cell.setAttribute("colspan", "2");
}
</script>
<input type=button value='Test' onClick='addline();'>
<table border=1 id='mytable'>
   <tr>
      <td>Col1</td>
      <td>Col2</td>
   </tr>
</table>

This works perfectly on Mozilla. On Internet Explorer, everything works great EXCEPT for setting the colspan attribute. Is there another way to set the colspan for IE so that I can make this cross-browser compatible?

-------------------------------------------------------------------------
Charlie Silverman
Sr. Systems Administrator
Globalstar, LLC

-------------------------------------------------------------------------
We now return you to your regularly scheduled reality.

 

[ackitsme]

Not exactly surprising, but IE doesn't correctly implement all of the DOM properties. It appears that some attributes don't even work, however the colspan attribute has to be correctly capitalized as colSpan.

I found a lot of useful information at this site:

http://www.pxl8.com/setAttribute_test.html

-------------------------------------------------------------------------
Charlie Silverman
Sr. Systems Administrator
Globalstar, LLC

-------------------------------------------------------------------------
We now return you to your regularly scheduled reality.