Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 11 of 11
  1. #1
    Regular Coder
    Join Date
    Sep 2011
    Posts
    184
    Thanks
    140
    Thanked 0 Times in 0 Posts

    Deleting all rows from a table

    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:

    Code:
    //===========================================================================================>>
    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

  • #2
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    25,965
    Thanks
    79
    Thanked 4,429 Times in 4,394 Posts
    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?
    An optimist sees the glass as half full.
    A pessimist sees the glass as half empty.
    A realist drinks it no matter how much there is.

  • #3
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    25,965
    Thanks
    79
    Thanked 4,429 Times in 4,394 Posts
    Something like this:
    Code:
    <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:
    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();
    An optimist sees the glass as half full.
    A pessimist sees the glass as half empty.
    A realist drinks it no matter how much there is.

  • #4
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    25,965
    Thanks
    79
    Thanked 4,429 Times in 4,394 Posts
    To wipe out all children of a given element, do this:
    Code:
    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:

    Code:
    var tbody = document.getElementById("mstrTable").getElementsByTagName("tbody")[0];
    while ( tbody.firstChild != null ) { tbody.removeChild( tbody.firstChild ); }
    An optimist sees the glass as half full.
    A pessimist sees the glass as half empty.
    A realist drinks it no matter how much there is.

  • #5
    Master Coder felgall's Avatar
    Join Date
    Sep 2005
    Location
    Sydney, Australia
    Posts
    6,642
    Thanks
    0
    Thanked 649 Times in 639 Posts
    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.

    Code:
    var tbl= document.getElementById("mstrTable");
    while ( tbl.tbodies[0].length>0) {tbl.tbodies[0].removeRow(0);}
    Stephen
    Learn Modern JavaScript - http://javascriptexample.net/
    Helping others to solve their computer problem at http://www.felgall.com/

    Don't forget to start your JavaScript code with "use strict"; which makes it easier to find errors in your code.

  • #6
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    25,965
    Thanks
    79
    Thanked 4,429 Times in 4,394 Posts
    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.)
    An optimist sees the glass as half full.
    A pessimist sees the glass as half empty.
    A realist drinks it no matter how much there is.

  • #7
    New Coder
    Join Date
    Jul 2012
    Location
    Ukraine
    Posts
    71
    Thanks
    1
    Thanked 18 Times in 17 Posts
    There is a quick way to delete all children of an element:
    Code:
    tbody.textContent="";
    /*however, doesn't work in IE<9, in that case use
    tbody.innerHTML="";
    but it's not standard. */

  • #8
    New Coder
    Join Date
    Jul 2012
    Location
    Ukraine
    Posts
    71
    Thanks
    1
    Thanked 18 Times in 17 Posts
    Quote Originally Posted by Old Pedant View Post
    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.

  • #9
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    25,965
    Thanks
    79
    Thanked 4,429 Times in 4,394 Posts
    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.
    An optimist sees the glass as half full.
    A pessimist sees the glass as half empty.
    A realist drinks it no matter how much there is.

  • #10
    Master Coder felgall's Avatar
    Join Date
    Sep 2005
    Location
    Sydney, Australia
    Posts
    6,642
    Thanks
    0
    Thanked 649 Times in 639 Posts
    Quote Originally Posted by Old Pedant
    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.

    Quote Originally Posted by Old Pedant View Post
    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.
    Last edited by felgall; 07-19-2012 at 03:43 AM.
    Stephen
    Learn Modern JavaScript - http://javascriptexample.net/
    Helping others to solve their computer problem at http://www.felgall.com/

    Don't forget to start your JavaScript code with "use strict"; which makes it easier to find errors in your code.

  • #11
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    25,965
    Thanks
    79
    Thanked 4,429 Times in 4,394 Posts
    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.
    An optimist sees the glass as half full.
    A pessimist sees the glass as half empty.
    A realist drinks it no matter how much there is.


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •