[RESOLVED] Dynamic Table Removal

@JMRKERNov 30.2007

I have been able to create a dynamic table and populate it.

My question is, what removes the entire table (or specifically just the tbody portion)
so that I can replace it with a newer table?

Do I need to remove individual rows from the table? If so, do I need to remove FIFO or LIFO?

Currently, the new information is appended to the old table and the table becomes twice as long.
I want to basically ‘refresh’ the table rows/cells only with newer information.

to post a comment

JavaScript

8 Comments(s) _↴

@toicontienNov 30.2007 — #You'll want to read up on the table DOM:

TABLE -- http://www.w3schools.com/htmldom/dom_obj_table.asp

TR -- http://www.w3schools.com/htmldom/dom_obj_tablerow.asp

TD -- http://www.w3schools.com/htmldom/dom_obj_tabledata.asp

(Note that many of the TABLE DOM properties also apply to THEAD, TBODY and TFOOT)

@JMRKERauthorDec 01.2007 — #Thanks 'toicontien'.

This is what I came up with:

[code=php]
 <html>
 <head>
 <title>Dynamic Table Test</title>
 <head>
 <script type="text/javascript">
 function MakeTable() { //  use following for DYNAMIC table test creation
 var tRows = document.getElementById('BQtable');
 for (var r=0; r<5; r++) {
 var tr = tRows.insertRow(tRows.rows.length);
 var td = tr.insertCell(tr.cells.length);
 td.innerHTML = 'Row: '+r;
 for (var c=0; c<5; c++) { td = tr.insertCell(tr.cells.length); td.innerHTML = 'Col:'+c; }
 }
 }
 function ClrTable() {
 // remove Rows From Table
 var tbl = document.getElementById('BQtable');
 var lastRow = tbl.rows.length;
 while (lastRow > 0) { tbl.deleteRow(lastRow - 1);  lastRow = tbl.rows.length; }
 }
 </script>
 </head>
 <body>
 <button onClick="MakeTable()"> Make Table </button>
 <button onClick="ClrTable()"> Clear Table </button>
 
 <!--  Dynamic table definition -->
 <div id="BQscore">
 <table id="BQtable" border="1"></table>
 </div>
 </body>
 <html>
 [/code]

Please let me know if you see any 'logic' problems with it that could come back to bite me in the behind! :o

@toicontienDec 03.2007 — #Doesn't look too bad. Looks pretty good, all though I'd recommend creating a TBODY element to hold all your TR elements. I'm a forum crawler ? and I randomly read on a thread here the Internet Explorer needs a TBODY element explicitly created when generating TABLEs using DOM methods. I've never personally had a problem with this, but I've also dealt with TABLEs that had THEAD and TBODY elements by default. Some cross browser testing is recommended if you haven't done so already. If you have and it works in IE, then you should be good to go.

@JMRKERauthorDec 03.2007 — #'toicontien', thanks for the heads-up!

Here's latest version with recommendations.

Have tested in FF, IE and Safari only.

[code=php]
 <html>
 <head>
 <title>Dynamic Table Test</title>
 <head>
 <script type="text/javascript">
 function MakeTable() { //  use following for DYNAMIC table test creation
 var tBody = document.createElement('tbody');
 var tRows = document.getElementById('BQtable');
 for (var r=0; r<5; r++) {
 var tr = tRows.insertRow(tRows.rows.length);
 //    var td = tr.insertCell(tr.cells.length);
 //    td.innerHTML = 'Row: '+r;
 for (var c=0; c<5; c++) {
 td = tr.insertCell(tr.cells.length);
 td.innerHTML = 'RC:'+r+c;
 }
 }
 tBody = appendChild(tr);
 }
 function ClrTable() {
 // remove Rows From Table
 var tbl = document.getElementById('BQtable');
 var lastRow = tbl.rows.length;
 while (lastRow > 0) { tbl.deleteRow(lastRow - 1);  lastRow =
 tbl.rows.length; }
 }
 </script>
 </head>
 <body>
 <button onClick="MakeTable()"> Make Table </button>
 <button onClick="ClrTable()"> Clear Table </button>
 
 <!--  Dynamic table definition -->
 
 <div id="BQscore">
 <!-- Note: next line leaves small footprint with border=1 -->
 <table id="BQtable" border="1"></table>
 </div>
 </body> 
 </html>
 [/code]

I assume I could create the table from scratch using a 'var table=createElement('table')'

with a reference to the <div> id to keep page placement, but I haven't tried this yet! ?

@toicontienDec 03.2007 — #There were a few logic errors in your code, that apparently didn't cause an error in the output. The code below works for me in Firefox, Opera and IE6:

&lt;!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"&gt;
 
 &lt;html&gt;
 &lt;head&gt;
 &lt;meta http-equiv="Content-Type" content="text/html; charset=utf-8"&gt;
 &lt;title&gt;Dynamic Tables&lt;/title&gt;
 
 <i>    </i>&lt;script type="text/javascript"&gt;
 <i>    </i>  function MakeTable() { //  use following for DYNAMIC table test creation
 
 <i>    </i>    // Create the TBODY element, all TR's appended to this
 <i>    </i>    var tBody = document.createElement('tbody');
 
 <i>    </i>    // Define vars to hold TR and TD nodes, to not redefine already defined vars
 <i>    </i>    var tr;
 <i>    </i>    var td;
 
 <i>    </i>    // Set basic data for row and column loops
 <i>    </i>    var r = 0;
 <i>    </i>    var c = 0;
 <i>    </i>    var maxRows = 5;
 <i>    </i>    var maxCols = 5;
 
 <i>    </i>    // Get a node reference to the TABLE and append the TBODY element to it
 <i>    </i>    document.getElementById('BQTable').appendChild(tBody);
 
 <i>    </i>    // Loop through maxRows to create TR's
 <i>    </i>    for (r; r&lt;maxRows; r++) {
 <i>    </i>      tr = tBody.insertRow(tBody.rows.length);
 
 <i>    </i>      // Loop through maxCols to create TD's
 <i>    </i>      for (c = 0; c&lt;maxCols; c++) {
 <i>    </i>        td = tr.insertCell(tr.cells.length);
 <i>    </i>        td.innerHTML = 'RC:'+r+c;
 <i>    </i>      }
 <i>    </i>    }
 
 <i>    </i>    // Nullify node references
 <i>    </i>    tr = td = tBody = null;
 <i>    </i>  }
 
 
 <i>    </i>  function ClearTable() {
 <i>    </i>    var table = document.getElementById("BQTable");
 
 <i>    </i>    // Remove the TBODY since all rows are inside it
 <i>    </i>    table.removeChild(table.getElementsByTagName("tbody")[0]);
 
 <i>    </i>    // Nullify the node reference to the TABLE
 <i>    </i>    table = null;
 <i>    </i>  }
 <i>    </i>&lt;/script&gt;
 
 &lt;/head&gt;
 &lt;body&gt;
 &lt;input type="button" onclick="MakeTable();" value="Create Table"&gt;
 &lt;input type="button" onclick="ClearTable();" value="Clear Table"&gt;
 &lt;table cellpadding="3" cellspacing="0" border="1" id="BQTable"&gt;&lt;/table&gt;
 &lt;/body&gt;
 &lt;/html&gt;

The code is fairly heavily commented to give you an idea of what's going on.

@JMRKERauthorDec 03.2007 — #Thanks again 'toicontien'.

As advertised it works well and has better comments than my original attempt.

Couple of points of clarification (for me) please.

1. Where did you read about the multiple assignment statement that follows?

// Nullify node references

tr = td = tBody = null;

Pretty neat, but I was not aware you could do t his.

Are there any limitations to its use? (Like objects vs. strings vs. elements vs. ???)

2. The removal of the 'tbody' contents looks easier than my row removal loop in the ClearTable function.

Why is the 'table=null' in there? I guess, a better question is where was it created to != null?

I thought this was created by the <table> tag you have after the <input> button definitions.

Code works fine. Just questions for my own inquisitive nature.

@toicontienDec 03.2007 — #1. Where did you read about the multiple assignment statement that follows?

// Nullify node references

tr = td = tBody = null;

Pretty neat, but I was not aware you could do t his.

Are there any limitations to its use? (Like objects vs. strings vs. elements vs. ???)[/QUOTE]

I think I picked that up from C++ ... not entirely sure. There really aren't any limitations but there's one thing you should beware of: The "var" keyword would not apply to all the variables in this case:

function myStuff() {
 var a = b = c = 42;
 }

The "var" keyword would only apply to the "a" variable, and then "b" and "c" are declared globally to the window object. Only the "a" variable would be declared locally to the myStuff function. When doing multiple assignments like above, always make sure you've declared your variables first, then do the multiple assignment to ensure the variable scope is correct.

2. The removal of the 'tbody' contents looks easier than my row removal loop in the ClearTable function.

Why is the 'table=null' in there? I guess, a better question is where was it created to != null?

I thought this was created by the <table> tag you have after the <input> button definitions.[/QUOTE]
Since circular node references cause Internet Explorer to leak memory like the Titanic, I generally set all variables that contain a node reference to null when a function is done executing. It's probably a bit overkill, but it ensures that no two variables in my scripts contain references to the same DOM node, hence preventing any circular references and memory leaks.

In the ClearTable() function, I declare a variable called "table" and set it equal to what the document.getElementById function returns. It returns a reference to the TABLE, and setting "table" to null at the end of the function sets that reference to null, not that actual TABLE DOM node.

Also, the circular reference memory leak problem has been fixed in IE7.

@JMRKERauthorDec 03.2007 — #Thanks. Appreciate the lesson.

Also in #JavaScript _↴

chosing between two URL's Help with changing evt.src How to display current url in top frame?

Success!

Help @JMRKER spread the word by sharing this article on Twitter...

Tweet This

[RESOLVED] Dynamic Table Removal

8 Comments(s) _↴

Also in #JavaScript _↴

Success!

Social

Version

[RESOLVED] Dynamic Table Removal

8 Comments(s) ↴

Also in #JavaScript ↴

Success!

The web is an endless sea of information. Don't miss the boat... Subscribe!

Social

Version

8 Comments(s) _↴

Also in #JavaScript _↴