Replace Table Help

S

SirCodesALot

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.

var tableHTML = "<table id=\"table1\"><tr><td>this is table 1</td></
tr></table>";
var tableHTML2 = "<table id=\"table2\"><tr><td>this is table 2</td></
tr></table>";

vat t1 = document.getElementById("table1");

if (t1)
{
t1 = tableHTML2;
}

I am sure that assignment is not right, its needs to be something like

t1.outerXml = tableHTML2;
or
t1.parentNode.innerHTML = tableHTML2; /// this could kill anything
else in the node though.

Any ideas on how to do this?

Thanks,
-SJ
 
J

Jeremy J Starcher

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.
Click to expand...

[code snipped]

Any ideas on how to do this?
Click to expand...

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), see www.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;

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>
 
S

SirCodesALot

Hi All,
Click to expand...
I am trying to dynamically replace a table in the dom, anyone have an
idea on how to do this.
Click to expand...
here is some sample suedo code of what I want to do.
Click to expand...

[code snipped]
Any ideas on how to do this?
Click to expand...

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;

    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>
Click to expand...


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.
 
T

Tom Cole

[code snipped]
Any ideas on how to do this?
Click to expand...
Click to expand...
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.
Click to expand...
You are better off using DOM2 methods to build it.
Click to expand...
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.
Click to expand...
<!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>
Click to expand...
<body onload="drawTable();" >
<table>
  <tbody id="partData">
  </tbody>
</table>
Click to expand...
<script type="text/javascript">
var plist = [
{
"idx":"538",
"section":"7",
"line":"1",
"zid":"1",
"zflag":"",
"zmfg":"TOM",
"zpnum":"230260",
"pdesc":"Carburetor A35 cpl."}
Click to expand...
,
{
"idx":"539",
"section":"7",
"line":"2",
"zid":"2",
"zflag":"M",
"zmfg":"TOM",
"zpnum":"229827",
"pdesc":"Jet 53"}
Click to expand...
,
{
"idx":"540",
"section":"7",
"line":"3",
"zid":"2",
"zflag":"M",
"zmfg":"TOM",
"zpnum":"217940",
"pdesc":"Jet 54"}
];
Click to expand...

function drawTable() {
Click to expand...
  // 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      
Click to expand...
    // 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) {
Click to expand...
  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
Click to expand...
  for (var i = 0; i < plist.length; i++) {
    var part = plist;
Click to expand...

    tr = document.createElement("tr");
Click to expand...
    makeCell(part.zpnum, tr);
    makeCell(part.pdesc, tr);
Click to expand...
    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;
Click to expand...
  td = document.createElement("td");
Click to expand...
  txt = document.createTextNode(c);
  td.appendChild(txt);
  tr.appendChild(td);
   return td;

</script>
</body>
</html>
Click to expand...

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 -
Click to expand...


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));
}
}

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

HTH...
 
J

Jeremy J Starcher

On Tue, 29 Apr 2008 10:54:12 -0700, SirCodesALot wrote:
Hi All,
Click to expand...
I am trying to dynamically replace a table in the dom, anyone have
an idea on how to do this.
Click to expand...
here is some sample suedo code of what I want to do.
Click to expand...
[code snipped]
Click to expand...
Any ideas on how to do this?
Click to expand...
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.
Click to expand...
You are better off using DOM2 methods to build it.
Click to expand...
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.
Click to expand...
Click to expand...
Click to expand...

[My code snipped]

[ Snipped ]
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...
}
}
Click to expand...

I like that. A little easier to use than some of what I was doing.
/**
* 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));
}
}
Click to expand...


For a static table, this works. In my case I had a number of event
handlers set up on the table that I stripped out of my example code.
When you want to edit your table you can call resetTable, and then
addRow for each row you need to create.
Click to expand...

Always nice to see another approach to the same problem. Gets out out of
our box.
 

Ask a Question

Want to reply to this thread or ask your own question?

You'll need to choose a username for the site, which only take a couple of moments. After that, you can post your question and our members will help you out.

Ask a Question

Similar Threads

Can someone tell me if this a real tracker? Or is it one designed to show you a different message at certain times, ie. acting like one? 0
How to add dropdown selected data to table using jquery 2
Can anyone please help? HTML - two tables applying different styles 4
Need help with <rowspan> in an HTML table 1
Only one table shows up with the information 2
Javascript DOM 1
Getting extra blank rows from appending HTML..? 2
Can someone pls help me with a little algorithm script 1

Members online

Total: 2,789 (members: 2, guests: 2,787)
Robots: 153

Forum statistics

Threads
474,142
Messages
2,570,819
Members
47,367
Latest member
mahdiharooniir

Latest Threads

Top