CODEWITHSUNDEEP
jquery
ChadM
ChadM

Reputation: 167

Clearing a table - JQuery

Not quite sure what's going sideways here.

The below function should clear all the rows and then create new rows, but while it does clear on-screen for a moment, it keeps the previous rows and appends to them.

Is this because of the use of appendTo? Why should it matter when it's occurring after the rows have been cleared?

Is there another / better way to clear a table and write an array?

<script type="text/javascript">
    function buildrow(){
        $( "#oatable tbody tr" ).each( function(){
            this.parentNode.removeChild( this ); 
              });

        $('input:checkbox:checked').each(function() { 
                var idtofind = ($(this).attr('id'));
                //alert(idtofind);
                //alert(idtofind);          
                //Hide Content (this is sloppy but easy to customize..)
                //$(wrapper).hide();
                //('This is the first ' + idtofind);    
                //Get XML Data
                $.ajax({
                type: "GET",
                url: "xml/OA.xml",
                dataType: "xml",
                success: function(xml) {
                    var tablediv = $('div#table');
                    var xmlArr = [];
                    $(xml).find('OAData').each(function(){
                                                if($(this).attr('OAval')===idtofind) {
                            //alert('This is the next ' + idtofind);
                        var xml_OAval           = $(this).attr('OAval');
                        var xml_OAid            = $(this).find('OAid').text();
                        var xml_BAC_Level_1         = $(this).find('BAC_Level_1').text();
                        var xml_Basel_Level_1       = $(this).find('Basel_Level_1').text();
                        var xml_Basel_Level_2       = $(this).find('Basel_Level_2').text();
                        var xml_Risk_Category_Level_3   = $(this).find('Risk_Category_Level_3').text();
                        var xml_GTO_Library_Ref_ID  = $(this).find('GTO_Library_Ref_ID').text();
                        var xml_Ent_Lib_Ref_ID      = $(this).find('Ent_Lib_Ref_ID').text();
                        var xml_Name            = $(this).find('Name').text();
                        var xml_Description     = $(this).find('Description').text();
                        var xml_Potential_Risk_Event    = $(this).find('Potential_Risk_Event').text();
                        var xml_Cause           = $(this).find('Cause').text();
                        var xml_GTO_Library     = $(this).find('GTO_Library').text();
                        var xml_Comments        = $(this).find('Comments').text();
                        // Add matched items to an array
                        xmlArr += '<tr><td>';
                        xmlArr += xml_OAid;
                        xmlArr += '</td><td>';
                        xmlArr += xml_BAC_Level_1;
                        xmlArr += '</td><td>';
                        xmlArr += xml_Basel_Level_1;
                        xmlArr += '</td><td>';
                        xmlArr += xml_Basel_Level_2;
                        xmlArr += '</td><td>';
                        xmlArr += xml_Risk_Category_Level_3;
                        xmlArr += '</td><td>';
                        xmlArr += xml_GTO_Library_Ref_ID;
                        xmlArr += '</td><td>';
                        xmlArr += xml_Ent_Lib_Ref_ID;
                        xmlArr += '</td><td>';
                        xmlArr += xml_Name;
                        xmlArr += '</td><td>';
                        xmlArr += xml_Description;
                        xmlArr += '</td><td>';
                        xmlArr += xml_Potential_Risk_Event;
                        xmlArr += '</td><td>';
                        xmlArr += xml_Cause;
                        xmlArr += '</td><td>';
                        xmlArr += xml_GTO_Library;
                        xmlArr += '</td><td>';
                        xmlArr += xml_Comments;
                        xmlArr += '</td></tr>';

                        //alert(xmlArr);
                        }
                      }); // end each loop

                  //Append array to table (this way is much faster than doing this individually for each item)
                  //alert(xmlArr)
          $(xmlArr).appendTo("tbody#oa");
        } // end post AJAX call operaitons
        }); // end AJAX
            }

    );
    }
    </script>

Upvotes: 0

Views: 9214

Answers (4)

saidesh kilaru
saidesh kilaru

Reputation: 748

 if tbody is there :
  $("#tablename tbody tr").remove();
 else:
  $("#tablename tr").remove();

Upvotes: 0

ShankarSangoli
ShankarSangoli

Reputation: 69915

To remove all the rows from a table tbody use this code.

$("#oatable tbody tr").remove();

.remove() reference: http://api.jquery.com/remove/

In your ajax success handler you have defined xmlArr as an array and you are concatenating string to it which is not corerct. Use the push method to add string to it.

success: function(xml) {
   var tablediv = $('div#table');
   var xmlArr = [];
   ....
   ....
   //xmlArr += '<tr><td>';
   //use push method
   xmlArr.push('<tr><td>');
   ....
   ....                    
   ....
   xmlArr.push('</td></tr>');
   ....
   ....



   //Finally use xmlArr.join('') to get the combined string
   $(xmlArr.join('')).appendTo("tbody#oa");

}

Upvotes: 4

Stefan Leever
Stefan Leever

Reputation: 682

The above answer is in the right direction however you are asking whether to clear the data from a table. The best way, from my point of view would be to do the following:

$("#oatable tbody tr td").html("");

This will clear all the data from each element in your table.

Best Regards and good luck,

Upvotes: 2

Fabio
Fabio

Reputation: 11990

try replace this

 $( "#oatable tbody tr" ).each( function(){ 
        this.parentNode.removeChild( this );  
          }); 

 $(xmlArr).appendTo("tbody#oa")

For this

$( "#oatable tbody" ).html("");

$( "tbody#oa" ).html($(xmlArr));

Upvotes: 0

Related Questions