...

View Full Version : Deleting all rows from a table



jason_kelly
07-18-2012, 10:29 PM
Hello,

I need your help.

If the following code below adds rows and values to the table, what would be the code to remove all the rows from the table except for the table headers:



//===========================================================================================>>
function v9_search() {
//===========================================================================================>>
if (rs.State == 1) {
rs.Close()
cn.Close()
}

cn.Open("Provider=Microsoft.Jet.OLEDB.4.0;Data Source = " + dbPath + dbFile + "");

rs.Open(mySQL, cn, 1, 3)

html = ""
html += '<table id="mstrTable" style="table-layout: fixed; font-family: arial; font-size: 9pt;" cellpadding="0" cellspacing="0">\n'
html += '<thead>\n'
html += '<tr>\n'
html += '<th class="locked" style="border-bottom: 1px solid rgb(128,128,128); border-top: 1px solid #ffffff; border-left: 1px solid #ffffff; border-right: 1px solid rgb(128,128,128); text-align: center; height: 30px; width: 20px; color: rgb(102,102,102); background-color: rgb(212,208,200);">#</th>\n'
html += '<th style="border-bottom: 1px solid rgb(128,128,128); border-top: 1px solid #ffffff; border-left: 1px solid #ffffff; border-right: 1px solid rgb(128,128,128); padding-left: 5px; width: 110px; color: rgb(102,102,102); background-color: rgb(212,208,200);">' + rs.fields(0).name + '</th>\n'
html += '<th style="border-bottom: 1px solid rgb(128,128,128); border-top: 1px solid #ffffff; border-left: 1px solid #ffffff; border-right: 1px solid rgb(128,128,128); padding-left: 5px; width: 110px; color: rgb(102,102,102); background-color: rgb(212,208,200);">' + rs.fields(1).name + '</th>\n'
html += '<th style="border-bottom: 1px solid rgb(128,128,128); border-top: 1px solid #ffffff; border-left: 1px solid #ffffff; border-right: 1px solid rgb(128,128,128); padding-left: 5px; width: 110px; color: rgb(102,102,102); background-color: rgb(212,208,200);">' + rs.fields(2).name + '</th>\n'
html += '<th style="border-bottom: 1px solid rgb(128,128,128); border-top: 1px solid #ffffff; border-left: 1px solid #ffffff; border-right: 1px solid rgb(128,128,128); padding-left: 5px; width: 110px; color: rgb(102,102,102); background-color: rgb(212,208,200);">' + rs.fields(3).name + '</th>\n'
html += '<th style="border-bottom: 1px solid rgb(128,128,128); border-top: 1px solid #ffffff; border-left: 1px solid #ffffff; border-right: 1px solid rgb(128,128,128); padding-left: 5px; width: 110px; color: rgb(102,102,102); background-color: rgb(212,208,200);">' + rs.fields(4).name + '</th>\n'
html += '<th style="border-bottom: 1px solid rgb(128,128,128); border-top: 1px solid #ffffff; border-left: 1px solid #ffffff; border-right: 1px solid rgb(128,128,128); padding-left: 5px; width: 110px; color: rgb(102,102,102); background-color: rgb(212,208,200);">' + rs.fields(5).name + '</th>\n'
html += '<th style="border-bottom: 1px solid rgb(128,128,128); border-top: 1px solid #ffffff; border-left: 1px solid #ffffff; border-right: 1px solid rgb(128,128,128); padding-left: 5px; width: 110px; color: rgb(102,102,102); background-color: rgb(212,208,200);">' + rs.fields(6).name + '</th>\n'
html += '<th style="border-bottom: 1px solid rgb(128,128,128); border-top: 1px solid #ffffff; border-left: 1px solid #ffffff; border-right: 1px solid rgb(128,128,128); padding-left: 5px; width: 110px; color: rgb(102,102,102); background-color: rgb(212,208,200);">' + rs.fields(7).name + '</th>\n'
html += '<th style="border-bottom: 1px solid rgb(128,128,128); border-top: 1px solid #ffffff; border-left: 1px solid #ffffff; border-right: 1px solid rgb(128,128,128); padding-left: 5px; width: 110px; color: rgb(102,102,102); background-color: rgb(212,208,200);">' + rs.fields(8).name + '</th>\n'
html += '<th style="border-bottom: 1px solid rgb(128,128,128); border-top: 1px solid #ffffff; border-left: 1px solid #ffffff; border-right: 1px solid rgb(128,128,128); padding-left: 5px; width: 110px; color: rgb(102,102,102); background-color: rgb(212,208,200);">' + rs.fields(9).name + '</th>\n'
html += '<th style="border-bottom: 1px solid rgb(128,128,128); border-top: 1px solid #ffffff; border-left: 1px solid #ffffff; border-right: 1px solid rgb(128,128,128); padding-left: 5px; width: 110px; color: rgb(102,102,102); background-color: rgb(212,208,200);">' + rs.fields(10).name + '</th>\n'
html += '<th style="border-bottom: 1px solid rgb(128,128,128); border-top: 1px solid #ffffff; border-left: 1px solid #ffffff; border-right: 1px solid rgb(128,128,128); padding-left: 5px; width: 110px; color: rgb(102,102,102); background-color: rgb(212,208,200);">' + rs.fields(11).name + '</th>\n'
html += '<th style="border-bottom: 1px solid rgb(128,128,128); border-top: 1px solid #ffffff; border-left: 1px solid #ffffff; border-right: 1px solid rgb(128,128,128); padding-left: 5px; width: 110px; color: rgb(102,102,102); background-color: rgb(212,208,200);">' + rs.fields(12).name + '</th>\n'
html += '<th style="border-bottom: 1px solid rgb(128,128,128); border-top: 1px solid #ffffff; border-left: 1px solid #ffffff; border-right: 1px solid rgb(128,128,128); padding-left: 5px; width: 110px; color: rgb(102,102,102); background-color: rgb(212,208,200);">' + rs.fields(13).name + '</th>\n'
html += '<th style="border-bottom: 1px solid rgb(128,128,128); border-top: 1px solid #ffffff; border-left: 1px solid #ffffff; border-right: 1px solid rgb(128,128,128); padding-left: 5px; width: 110px; color: rgb(102,102,102); background-color: rgb(212,208,200);">' + rs.fields(14).name + '</th>\n'
html += '<th style="border-bottom: 1px solid rgb(128,128,128); border-top: 1px solid #ffffff; border-left: 1px solid #ffffff; border-right: 1px solid rgb(128,128,128); padding-left: 5px; width: 110px; color: rgb(102,102,102); background-color: rgb(212,208,200);">' + rs.fields(15).name + '</th>\n'
html += '<th style="border-bottom: 1px solid rgb(128,128,128); border-top: 1px solid #ffffff; border-left: 1px solid #ffffff; border-right: none; padding-left: 5px; width: 130px; color: rgb(102,102,102); background-color: rgb(212,208,200);">' + rs.fields(16).name + '</th>\n'
html += '</tr>\n'
html += '</thead>\n'

var i = 0
html += '<tbody>\n'

while (!rs.eof) {
++i
html += '<tr style="color: rgb(102,102,102)">\n'
html += '<td class="locked" style="height: 20px; text-align: center; border-right: 1px solid rgb(128,128,128); border-bottom: 1px solid rgb(128,128,128);">'+i+'.</td>\n'
for (var r = 0; r < rs.fields.count; ++r) {

if (r == 16) {
html += '<td style="border-right: 1px solid none; border-bottom: 1px solid rgb(128,128,128); padding-left: 5px; white-space: nowrap; overflow: hidden;">'+rs.fields(r).value+'</td>\n'
}
else {
html += '<td style="border-right: 1px solid rgb(128,128,128); border-bottom: 1px solid rgb(128,128,128); padding-left: 5px; white-space: nowrap; overflow: hidden;">'+rs.fields(r).value+'</td>\n'
}


}//end of for
html += '</tr>\n'
rs.MoveNext
}//end of while
html += '</tbody>\n'
html += '</table>\n'

document.getElementById("p1").innerHTML = html



Much thanks and appreciation for everyones help in advance.

Cheers,

Jay

Old Pedant
07-18-2012, 10:41 PM
UGH. That's a terrible way to construct a table, using innerHTML.

You really ought to be using document.createElement().

And have you not heard of CSS???

And hey, WHY are you opening up the recordset for WRITING????

Surely you aren't going to leave it open for write the whole time the page is being displayed?

Old Pedant
07-18-2012, 11:18 PM
Something like this:


<style type="text/css">
#mstrTable {
table-layout: fixed;
font-family: arial;
font-size: 9pt;
}
#mstrTable th {
border-bottom: 1px solid rgb(128,128,128);
border-top: 1px solid #ffffff;
border-left: 1px solid #ffffff;
border-right: 1px solid rgb(128,128,128);
padding-left: 5px;
width: 110px;
color: rgb(102,102,102);
background-color: rgb(212,208,200);
}

/* only put the DIFFERENCES in these styles: */
#mstrTable th.locked
{
padding-left: 0px;
text-align: center;
height: 30px;
width: 20px;
}

#mstrTable th.lastHeader
{
border-right: none;
width: 130px;
}

#mstrTable td
{
border-right: 1px solid none;
border-bottom: 1px solid rgb(128,128,128);
padding-left: 5px;
white-space: nowrap;
overflow: hidden;
}

/* only put the DIFFERENCES in these styles: */
#mstrTable td.locked
{
height: 20px;
text-align: center;
border-right: 1px solid rgb(128,128,128);
}
#mstrTable td.lastColumn
{
border-right: 1px solid rgb(128,128,128);
}
</style>

And then this for the table-create code:


cn.Open("Provider=Microsoft.Jet.OLEDB.4.0;Data Source = " + dbPath + dbFile + "");
var rs = cn.Execute(mySQL);

rs.Open(mySQL, cn, 1, 3)

// create the table:
var tbl = document.createElement("table");
tbl.id = "mstrTable";

// first, create the thead:
var thead = document.createElement("thead");
var tr = document.createElement("tr");

// the # fixed first column:
var th0 = document.createElement("th");
th0.className = "locked";
th0.appendChild( document.createTextNode("#") );
tr.appendChild(th0);

for ( var thc = 0; thc <= 16; ++thc )
{
var th = document.createElement("th");
if ( thc == 16 ) { th.className = "lastHeader"; }
th.appendChild( document.createTextNode( rs.fields(thc).name ) );
tr.appendChild(th);
}
thead.appendChild(tr);
tbl.appendChild(thead);

// now the body:
var tbody = document.createElement("tbody");

var i = 0;
while (!rs.eof)
{
++i;
tr = document.createElement("tr");
tr.style.color = "rgb(102,102,102)";
var td0 = document.createElement("td");
td0.className = "locked";
td0.appendChild( document.createTextNode(i) );
tr.appendChild(td0);

// ??? why do you hardcode the 16 for the count of NAMES but then
// ??? use rs.fields.count here? What would happen if the count were ever != 16???
for (var tdc = 0; tdc < rs.fields.count; ++r)
{
var td = document.createElement("td");
if (tdc == 16) { td.className = "locked"; }
td.appendChild( document.createTextNode( rs.fields(tdc).value ) );
tr.appendChild(td);
}
tbody.appendChild(tr);
}
tbl.appendChild(tbody);
var target = document.getElementById("p1");
target.appendChild(tbl);
rs.close();

Old Pedant
07-18-2012, 11:22 PM
To wipe out all children of a given element, do this:


var element = ...however you get it...

while( element.firstChild != null ) { element.removeChild( element.firstChild ); }

So to remove all your <tr>s from the <tbody> of your table, for example, you could do:



var tbody = document.getElementById("mstrTable").getElementsByTagName("tbody")[0];
while ( tbody.firstChild != null ) { tbody.removeChild( tbody.firstChild ); }

felgall
07-18-2012, 11:29 PM
You only need two createElement calls to create a table - one for the table tag and one for the tbody tag - all the rest can be created simply by setting the appropriate properties and methods on the table node in the DOM - see http://javascriptexample.net/domtable12.php for an example.

The easiest way to delete rows from a table is to call the deleteRow() method on the appropriate tbody specifying the number of the row to be deleted.


var tbl= document.getElementById("mstrTable");
while ( tbl.tbodies[0].length>0) {tbl.tbodies[0].removeRow(0);}

Old Pedant
07-19-2012, 12:16 AM
The funny thing is, I learned that method *YEARS* ago, when only MSIE supported it. I think even in version 5. (Or maybe it was that Netscape 4 didn't support it, which is why I stopped using it. One of the two.)

Anyway...

So do you know: If you insertCell() into to <tr> that is in the <thead>, is that automatically actually a <th> instead of a <td>? (If not, you'll need to apply a className to it to make it look like a <th>, of course.)

oneguy
07-19-2012, 01:19 AM
There is a quick way to delete all children of an element:


tbody.textContent="";
/*however, doesn't work in IE<9, in that case use
tbody.innerHTML="";
but it's not standard. */

oneguy
07-19-2012, 01:30 AM
So do you know: If you insertCell() into to <tr> that is in the <thead>, is that automatically actually a <th> instead of a <td>?
No, a <td> element is always inserted.

Old Pedant
07-19-2012, 01:41 AM
So it might actually be worth using document.createElement("th") for your <thead> elements.

But yes, clearly using insertCell and insertRow are a little easier.

felgall
07-19-2012, 04:37 AM
The funny thing is, I learned that method *YEARS* ago, when only MSIE supported it. I think even in version 5. (Or maybe it was that Netscape 4 didn't support it, which is why I stopped using it. One of the two.)

IE5 was also the first browser to support createElement - Netscape 4 and earlier didn't support much interaction with the HTML at all.


So it might actually be worth using document.createElement("th") for your <thead> elements.

But yes, clearly using insertCell and insertRow are a little easier.

You could just use CSS to style the td inside the thead differently from the td inside the tbody - like I did in my create table example.

It is only for row headings where you'd need to either create th tags or use a class in order to style them appropriately.

I did some comparison testing a couple of years ago and accessing the parts of the table using the properties associated with the table object was slightly faster in most browsers than using the equivalent regular DOM commands that you'd need to use if it wasn't part of a table. The exceptions were Firefox where it was very slightly slower (as if FF converts the code to the equivalent and then runs that) and Opera where it isn't just slightly faster but is actually FIVE times faster.

Old Pedant
07-19-2012, 09:46 PM
Interesting. Still, and all, either method will work.

And since he is using an ActiveX object (his "ADODB.Recorset") it's only going to run in MSIE, anyway. WHich I should have realized in which case I would have used insertRow and insertCell. *sigh*.

Of course, he hasn't bothered to come back for his answer, so maybe he didn't need all that, after all.



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum