Re: Replace Table Help

On Apr 29, 3:10 pm, SirCodesALot <sjour...@xxxxxxxxx> wrote:
On Apr 29, 1:42 pm, Jeremy J Starcher <r3...@xxxxxxxxx> wrote:





On Tue, 29 Apr 2008 10:54:12 -0700, SirCodesALot wrote:
Hi All,

I am trying to dynamically replace a table in the dom, anyone have an
idea on how to do this.

here is some sample suedo code of what I want to do.

[code snipped]

Any ideas on how to do this?

innerHTML has a number of known issues, including a handful dealing with
tables.  I don't remember what they are anymore, since I recommend
avoiding innerHTML whenever possible.

You are better off using DOM2 methods to build it.

I've ditched this method in favor of building the table server-side, to
keep my web-app running on non-JS enabled browsers... but here
is a stripped down copy of what I was using.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
            "http://www.w3.org/TR/html4/strict.dtd";>
<html>
<head>
  <meta name="generator" content="HTML Tidy for Linux/x86 (vers 1
September 2005), seewww.w3.org">
  <meta http-equiv="Content-Type" content="text/html; charset=us-ascii">
</head>

<body onload="drawTable();" >
<table>
  <tbody id="partData">
  </tbody>
</table>

<script type="text/javascript">
var plist = [
{
"idx":"538",
"section":"7",
"line":"1",
"zid":"1",
"zflag":"",
"zmfg":"TOM",
"zpnum":"230260",
"pdesc":"Carburetor A35 cpl."}

,
{
"idx":"539",
"section":"7",
"line":"2",
"zid":"2",
"zflag":"M",
"zmfg":"TOM",
"zpnum":"229827",
"pdesc":"Jet 53"}

,
{
"idx":"540",
"section":"7",
"line":"3",
"zid":"2",
"zflag":"M",
"zmfg":"TOM",
"zpnum":"217940",
"pdesc":"Jet 54"}

];

function drawTable() {

  // This is the TABLE BODY id  
  var tbodyID = 'partData';
  if (document.getElementById) {
        clearChildNodes(tbodyID);
    // assure bug-free redraw in Geck engine by
    // letting window show cleared table      

    // Prolly not needed anymore, but I have one customer still on
    // an old version of NS.  I'd rather not hear him complain.
    if (navigator.product && navigator.product == "Gecko") {
      setTimeout("finishDrawTable('" + tbodyID + "')", 0);
    } else {
      finishDrawTable(tbodyID);
    }
  } else {
    alert("Sorry, dynamic table feature works with IE5 or later for
Windows, and Netscape 6 or later.");
  }

}

// Complete the reconstruction of the sorted table
function finishDrawTable(tbodyID) {

  var tr, td, txt;
  tbody = document.getElementById(tbodyID);
  // create holder for accumulated tbody elements and text nodes
  var frag = document.createDocumentFragment();
  // loop through data source

  for (var i = 0; i < plist.length; i++) {
    var part = plist[i];

    tr = document.createElement("tr");

    makeCell(part.zpnum, tr);
    makeCell(part.pdesc, tr);

    frag.appendChild(tr);
  }
  if (!tbody.appendChild(frag)) {
    alert("This browser doesn't support dynamic tables.");
  }

}

// Remove existing content of an element
function clearChildNodes(elemID) {
  var elem = document.getElementById(elemID);
  if (elem == undefined) return;
  while (elem.childNodes.length > 0) {
    elem.removeChild(elem.firstChild);
  }

}

function makeCell(c, tr)
{
  var tr, td, txt;

  td = document.createElement("td");

  txt = document.createTextNode(c);
  td.appendChild(txt);
  tr.appendChild(td);
   return td;

}

</script>
</body>
</html>

Thanks for the reply. I found a way but, it looses the sortedness.

var curTable = document.getElementById(curDivId);
  if(curTable)
  {
     var curParent = curTable.parentNode;
     // remove the old table
     curParent.removeChild(curTable);
     // add the new plus the rest of the content form the parent.
     curParent.innerHTML = newHtml + curParent.innerHTML;
   }

thanks again.- Hide quoted text -

- Show quoted text -

Is your table data coming from a server script? Just curious...

Not sure if this is the ideal way, but rather than using innerHTML, I
tend to use insertRow and deleteRow to add and remove rows from a
table, rather than replacing the entire table. For example:

/**
* Remove all rows from the given table.
* If removeHeader == false, leave the first row as a header row...
*/
function resetTable(table, removeHeader) {
var end = (removeHeader) ? 0 : 1;
while (table.rows.length > end) {
table.deleteRow(table.rows.length - 1); //remove last row...
}
}

/**
* Adds a row to the end of the given table and populates the cell(s)
with the value(s)
* in the data array.
*/
function addRow(table, data) {
var row = table.insertRow(table.rows.length);
for (var i = 0; i < data.length; i++) {
var cell = row.insertCell(i);
cell.appendChild(document.createTextNode(data[i]));
}
}

When you want to edit your table you can call resetTable, and then
addRow for each row you need to create.

HTH...
.

Relevant Pages