www.webdeveloper.com
Results 1 to 2 of 2

Thread: clearing all elements in a specified table with jquery.

  1. #1
    Join Date
    Sep 2008
    Posts
    104

    clearing all elements in a specified table with jquery.

    So I have a form with a few tables in it. One of these tables is to enter new values, and the rest of the tables are to update existing values. I need to be able to empty all values of elements within the table for entering new values on a button click, but I'm having trouble doing this with jquery.

    I'm trying to find all elements inside of the table with id of "new_details" and then set all text box values to "" and uncheck all checkboxes but I'm not getting anywhere.

    Here is my javascript:
    HTML Code:
        var newtable = $("#new_table").get(0); 
        
        //get all elements inside table
        var elms = newtable.getElementsByTagName("*");
        //get count of elements inside table
        var maxI = elms.length;
       
        for(var i = 0; i < maxI; ++i) {  //loop through all elements inside table
            var elm = elms[i];
            //if type is text, set to empty
            if (elm.type == "text"){
                //alert("Type: " + elm.type + "\nName: " + elm.name + "\nId: " + elm.id + "\nvalue: " + elm.value);
                elm.value="";
            }
            if (elm.type == "checkbox"){
               //remove checked attribute
            }
                
        }
    Here is a snippet of my table for example:
    HTML Code:
    <table id="new_details>
    <tr>
                        <td><label for="new_master">Master:</label></td>
                        <td><input type="text" id="new_master" name="new_master" onChange="markUpdated('new');" value=""/></td>
                    </tr>
                    <tr>
                        <td><label for="new_client">Client:</label></td>
                        <td><input type="text" id="new_client" name="new_client" onChange="markUpdated('new');" value=""/></td>
                    </tr>
                    <tr>
                        <td><label for="new_tgl">Need TGL:</label></td>
                        <td><input type="checkbox" id="new_tgl" name="new_tgl" onChange="markUpdated('new');" value="1"/></td>
                    </tr>
    </table>
    Last edited by mcru; 08-17-2011 at 02:29 PM.

  2. #2
    Join Date
    Sep 2008
    Posts
    104
    Solved it, but i'm sure it can be done in a more elegant way.

    I just wrapped the table in a div and got all elements inside the div.

    Code:
    <div id="new">
    .... table goes here
    </div>
    Javascript:

    Code:
    var newZone = $("#new").get(0); //'new' is the id of the div that wraps the new table
        
        //get all elements inside table
        var elms = newZone.getElementsByTagName("*");
        //get count of elements inside table
        var maxI = elms.length;
       
        for(var i = 0; i < maxI; ++i) {  //loop through all elements inside table
            var elm = elms[i];
            //if type is text, set to empty
            if (elm.type == "text"){
                //alert("Type: " + elm.type + "\nName: " + elm.name + "\nId: " + elm.id + "\nvalue: " + elm.value);
                elm.value="";
            }
            if (elm.type == "checkbox"){
               //remove checked attribute
               elm.checked = false;
            }  
        }

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

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



Recent Articles