テーブルをクリアする - 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

このコードを使用tabletbodyからすべての行を削除します。

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

.remove()参照：あなたは配列としてxmlArrを定義しているとあなたがcorerctではありませんそれに文字列を連結している、あなたのajax成功ハンドラでhttp://api.jquery.com/remove/

。文字列を追加するには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").html(""); 

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

Answer 3

については、この

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

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

を交換してみてください。私の視点では、次のようにすることをお勧めします。

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

これは、テーブルの各要素からすべてのデータをクリアします。

よろしくと幸運、

Answer 4

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