清除表 - JQuery

Question

不太确定这里有什么问题。

下面的函数应该清除所有的行，然后创建新的行，但是当它在屏幕上清除一会儿时，它会保留前面的行并附加到它们。

这是因为使用了appendTo吗？在清除行之后，为什么要重要？

有没有其他/更好的方法来清除表并写一个数组？

<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

要从table tbody中移除所有行，请使用此代码。

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

.remove()参考：http://api.jquery.com/remove/

在ajax成功处理程序中，您已将xmlArr定义为数组，并且您将字符串连接到不是corerct的字符串。使用push方法向其添加字符串。

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

}

Answer 2

上面的答案是正确的，但是你要问是否清除表中的数据。从我的角度来看，最好的方法是执行以下操作：

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

这将清除表格中每个元素的所有数据。

最诚挚的问候，祝你好运，

Answer 3

尝试替换此

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

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

对于此

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

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

Answer 4

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