473,326 Members | 2,126 Online
Bytes | Software Development & Data Engineering Community
Post Job

Home Posts Topics Members FAQ

Join Bytes to post your question to a community of 473,326 software developers and data experts.

Replace Table Help

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
Jun 27 '08 #1
4 1699
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), 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[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>
Jun 27 '08 #2
On Apr 29, 1:42*pm, Jeremy J Starcher <r3...@yahoo.comwrote:
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.
Jun 27 '08 #3
On Apr 29, 3:10*pm, SirCodesALot <sjour...@gmail.comwrote:
On Apr 29, 1:42*pm, Jeremy J Starcher <r3...@yahoo.comwrote:


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...
Jun 27 '08 #4
On Tue, 29 Apr 2008 15:07:51 -0700, Tom Cole wrote:
On Apr 29, 3:10Â*pm, SirCodesALot <sjour...@gmail.comwrote:
>On Apr 29, 1:42Â*pm, Jeremy J Starcher <r3...@yahoo.comwrote:


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.
[My code snipped]
>Thanks for the reply. I found a way but, it looses the sortedness.
[ Snipped ]
>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...
}
}
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[i]));
}
}
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.
Always nice to see another approach to the same problem. Gets out out of
our box.
Jun 27 '08 #5

This thread has been closed and replies have been disabled. Please start a new discussion.

Similar topics

12
by: Barnes | last post by:
Does anyone know of a good way to use the JavaScript string.replace() method in an ASP form? Here is the scenario: I have a form that cannot accept apostrophes. I want to use the replace() so...
4
by: Jane Doe | last post by:
Hi, I need to search and replace patterns in web pages, but I can't find a way even after reading the ad hoc chapter in New Rider's "Inside JavaScript". Here's what I want to do: function...
2
by: Daniel | last post by:
I use an Access database to basically take data exports, import them, manipulate the data, and then turn them into exportable reports. I do this using numerous macros, and queries to get the data...
4
by: serge | last post by:
I managed to put together C# code and have it do the following: 1- Get all the table names that start with the letter "Z" from sysobjects of my SQL 2000 database and put these table names...
5
by: Kay | last post by:
Hi All, I'm trying to write a small sub/function to replace some (invalid) character in a combo box, or may be even text box. For example, I have several combo boxes that allows user to select...
9
by: MrHelpMe | last post by:
Hello again experts, I have successfully pulled data from an LDAP server and now what I want to do is drop the data into a database table. The following is my code that will insert the data but...
0
by: sudheerb | last post by:
Hi Group, I have a task to replace all the words. For example, The word is TABLE It shoud not replace the words like TABLES ONE-TABLE
4
by: ladymands | last post by:
I have a field address_line1 in a table called test, within this field I have commas' at various places, I have set a query to find these but when I use the update query to replace the comma's the...
6
by: simon.robin.jackson | last post by:
Ok. I need to develop a macro/vba code to do the following. There are at least 300 corrections and its expected for this to happen a lot more in the future. Therefore id like a nice...
0
by: DolphinDB | last post by:
Tired of spending countless mintues downsampling your data? Look no further! In this article, you’ll learn how to efficiently downsample 6.48 billion high-frequency records to 61 million...
0
by: ryjfgjl | last post by:
ExcelToDatabase: batch import excel into database automatically...
1
isladogs
by: isladogs | last post by:
The next Access Europe meeting will be on Wednesday 6 Mar 2024 starting at 18:00 UK time (6PM UTC) and finishing at about 19:15 (7.15PM). In this month's session, we are pleased to welcome back...
0
by: jfyes | last post by:
As a hardware engineer, after seeing that CEIWEI recently released a new tool for Modbus RTU Over TCP/UDP filtering and monitoring, I actively went to its official website to take a look. It turned...
1
by: CloudSolutions | last post by:
Introduction: For many beginners and individual users, requiring a credit card and email registration may pose a barrier when starting to use cloud servers. However, some cloud server providers now...
1
by: Defcon1945 | last post by:
I'm trying to learn Python using Pycharm but import shutil doesn't work
1
by: Shællîpôpï 09 | last post by:
If u are using a keypad phone, how do u turn on JavaScript, to access features like WhatsApp, Facebook, Instagram....
0
by: af34tf | last post by:
Hi Guys, I have a domain whose name is BytesLimited.com, and I want to sell it. Does anyone know about platforms that allow me to list my domain in auction for free. Thank you
0
by: Faith0G | last post by:
I am starting a new it consulting business and it's been a while since I setup a new website. Is wordpress still the best web based software for hosting a 5 page website? The webpages will be...

By using Bytes.com and it's services, you agree to our Privacy Policy and Terms of Use.

To disable or enable advertisements and analytics tracking please visit the manage ads & tracking page.