テーブルが動的に更新された場合、JQuery行セレクタが正常に動作しません

Question

20行のテーブルTB1があります。上2行と下2行は、その中の一種のヘッダーです。今すぐ1つのAJAX呼び出しを介して、同じ構造を持つ新しいテーブルをhtmlとして取得します。次に、そのhtmlから最初の2行と最後の2行を削除してから、2行目の最後の行のすぐ上にあるテーブルTB1に​​htmlを挿入します。コードは、私のAJAX呼び出し機能では、次のようになります。

 var op = $(html);//html returned by AJAX call 
     var tblData = op.find("#myTable > tbody"); 
     var $tblData = $(tblData); 
     $tblData.find('tr:first').remove();//remove first 2 lines of headers from response 
     $tblData.find('tr:first').remove(); 
     $tblData.find('tr:last').remove();//remove the last 2 headers rows 
     $tblData.find('tr:last').remove(); 


     //add data just after the last data row 
     $("#TB1 tr:nth-last-child(2)").before($tblData .html()); 
     $("#TB1 tr:last").remove(); //sometimes I need remove the last 1 header row on some condition 

今私のテーブルTB1に​​は、（ヘッダを削除した後に新しい行）20（旧行）+ 16を持っている36行を=。 TB1の行の長さチェックを行うと、36が正しいことがわかります。 しかし、セレクタをJQueryに入れてnth-childまたはnth-last-childを読み込むと、正しく動作しません。時には、新しく追加された行を返して何も返しません。 nth-child(26)のようにnth-child(24)のようなものは私に何も与えません.24番目の番号で行を返します。 nth-last-childと同じです。 これはどういうわけか、行を動的に追加したり削除したりすることによって、セレクタがうんざりしてしまいます。 このような状況に対処する方法は何ですか？

Answer 1

最後の行を再度検索してください。

$("#TB1").find("tr:last").remove() 

これらはすべて、変数を定義したときの表の状態によって異なります。

最後の行を返す関数を使用する必要があります。

function getLastRowFromTable(talbe){ 
    return $(table).find("tr:last"); 
} 

getLastRowFromTable('#TB1').remove(); 

この方法で、現在の最後の行を取得します。

Answer 2

ここではたくさんのコードがありません。これは難しいものですが、あなたの問題はajax呼び出しで.done（）関数を使って簡単に解決できると思います。 Ajaxは非同期であるため、お使いのブラウザ以来、AJAX機能は、あなたの問題になる可能性がある（あなたのデータを返すに行われます一度

$.ajax({ 
    //WHATEVER YOUR AJAX CALL DOES TO RETURN THE HTML. 
    }).done(function(html)){ 
var op = html;//html returned by AJAX call 
    var tblData = op.find("#myTable > tbody"); 
    var $tblData = $(tblData); 
    $tblData.find('tr:first').remove();//remove first 2 lines of headers from response 
    $tblData.find('tr:first').remove(); 
    $tblData.find('tr:last').remove();//remove the last 2 headers rows 
    $tblData.find('tr:last').remove(); 


    //add data just after the last data row 
    $("#TB1 tr:nth-last-child(2)").before($tblData .html()); 
    $("#TB1 tr:last").remove(); //sometimes I need remove the last 1 header row on some condition 
}); 

これではJavaScriptを確実にしなければならないだけ実行されますので、基本的にはこのような何かが