Question

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>

Answer 1

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");

}