正しい順序で行を配置していないAjaxを使用したJquery挿入行

Question

（「値」に関するいくつかの基本的な質問に答えることができないため - 目的を書き直しました。

このHTMLは出発点です。私が行の 'ボタン'をクリックすると、その行の後に行を挿入したいと思います。その新しい行の内容はajaxコールから来ますが、この質問では、TRの後に "tom、dick or harry"（選択されたものに応じて...）を挿入するだけです。ここで

<table id="xTable" > 

    <thead> 
     ... 
    </thead> 

    <tfoot> 
     ... 
    </tfoot> 

    <tbody> 

     <tr> 
      <td nowrap class="segment" > 
       <div class="btn-group" > 
        <button class="btn btn-default btn-xs dropdown-toggle" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" > + <span class="caret" ></span></button> 
        <ul class="dropdown-menu segmentList" > 
         <option onclick="insRow('tom')" >tom</option> 
         <option onclick="insRow('dick')" >dick</option> 
         <option onclick="insRow('harry')" >harry</option> 
        </ul> 
       </div> 
       <span class="segmentLabel" >BOB</span> 
      </td> 
     </tr> 


     <tr> 
      <td nowrap class="segment" > 
       <div class="btn-group" > 
        <button class="btn btn-default btn-xs dropdown-toggle" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" > + <span class="caret" ></span></button> 
        <ul class="dropdown-menu segmentList" > 
         <option onclick="insRow('tom')" >tom</option> 
         <option onclick="insRow('dick')" >dick</option> 
         <option onclick="insRow('harry')" >harry</option> 
        </ul> 
       </div> 
       <span class="segmentLabel" >LISA</span> 
      </td> 
     </tr> 

    </tbody> 

</table> 

は、JSは私が今持っている -

function insRow(i) { 

    var tr = $(this).parents().closest('tr');  
    $('#xTable tbody').append('<tr><td>' + i + </td></tr>').insertAfter(tr); 

}; 

動作しないことをここフィドルだ... https://jsfiddle.net/w95xsd2L/3/

Answer 1

参照フィドルやるべきこと：あなたのセットアップで間違ってたくさんあるhttps://jsfiddle.net/w95xsd2L/4/

1. を、一つの問題を一緒に渡していますthisを呼び出すときに明示的に指定することで回避できます機能はinsRow.call(this, ...)です。

2. parents().closest()を参照する方法はありますが、parents（）は必要ありません。

3. またinsertAfterを必要としないか、別のテーブルルックアップを行うには、単にすでにTRは、あなたがclosest

JSで見つけたにafter()を適用しますが何であるかを

function insRow(i) { 

    var $tr = $(this).closest('tr'); 
    $tr.after('<tr><td>' + i + '</td></tr>'); 

}; 

Answer 2

だから私はthisが何であるかを知りません。

var tr = $(this).parents().closest('tr'); 

この行が行っていることは、アイテムのすべての親のリストを取得することです。その後、それはそのリストを通り、trである親を見つける。だから、ネストされたテーブルを持っているなら、それは変なものをやっています。 parents（）部分を削除してください。

var tr = $(this).closest('tr'); 

ここで、新しい行を追加している行は、実際にあなたが思っていることを実行していません。

$('#xTable tbody').append(data).insertAfter(tr); 

tbodyに「data」を追加し、tbの後にtbodyを追加すると言っていることです。

あなただけ

tr.after(data); 

または

$(data).insertAfter(tr);