JQueryの挿入時のテーブル行

Question

iveは、htmlテーブルに行を挿入できるようにするための作業を進めてきました。それはかなりトリッキーだった。 Iveは最初の "挿入"のためだけに機能するものを見つけました。私は何が間違っているのか把握できません。

Ive基本的なテーブルは3列あり、各テーブルには2行の間に行を挿入できるボタンがあります。 Iveはこのサイトで解決策を探し出し、jqueryソリューションを取得しました。つまり、ボタンを押すと、行が追加されます。しかし、最後の行を挿入した後に別の行を追加すると、その行は1つの位置に挿入され、次回には2行挿入されたボタンを押してしまいます。この？

もっと良い方法がありますか？つまり、任意の位置でテーブルに行を追加しますか？

JQueryコード;

<script> 
$(document).ready(function(){ 
    $(".addRow").click(function(event){ 

    //get the button id to get the row 
    var $id=this.id; 
    var $totrecords; 
    var $newrow; 
    var $totalrowsadded; 
    //get id of clicked button 
    $id=$id.replace("add_", ""); 

    $totrecords=document.getElementById('totalrecords').value; 
    $totrecords++; 

    //store number of rows added 
    $totalrowsadded=document.getElementById('totalrowsadded').value; 
    $totalrowsadded++; 
    document.getElementById('totalrowsadded').value=$totalrowsadded; 

    //update record count 
    document.getElementById('totalrecords').value=$totrecords; 

    var $html='<tr class="newrow"><td>'+$totrecords+'<button type="button" class="addRow" id="add_'+$totrecords+'">add</button></td><td><label for="ProductHeight'+$totrecords+'">height</label><input name="data[Product][height'+$totrecords+']" type="text" value="0" id="ProductHeight'+$totrecords+'"/></td><td><label for="ProductWidth'+$totrecords+'">width</label><input name="data[Product][width'+$totrecords+']" type="text" value="0" id="ProductWidth'+$totrecords+'"/></td><td><label for="ProductPrice'+$totrecords+'">List Price</label><input name="data[Product][price'+$totrecords+']" type="text" id="ProductPrice'+$totrecords+'"/></td></tr>'; 


    $newrow=parseInt($id)+1; 
    alert('new row insert at '+$newrow); 

    $('#productstable > tbody> tr:nth-child(' + $newrow + ')').after($html);  


}); 
}); 

</script> 

テーブルは次のようになります。

<table id="productstable"> 
    <tr> 
     <th>Insert</th> 
     <th>Height</th> 
     <th>Width</th> 
     <th>List price</th> 
    </tr> 

    <tbody> 
    <tr id="0"> 
     <td>0 :<button type="button" class="addRow" id="add_0">add</button></td> 
     <td><label for="ProductHeight0">height</label><input name="data[Product][height0]" type="text" value="115" id="ProductHeight0"/></td> 
     <td><label for="ProductWidth0">width</label><input name="data[Product][width0]" type="text" value="595" id="ProductWidth0"/></td> 
     <td><label for="ProductPrice0">List Price</label><input name="data[Product][price0]" type="text" id="ProductPrice0"/></td> 
    </tr> 

    <tr id="1"> 
     <td>1 :<button type="button" class="addRow" id="add_1">add</button></td> 
     <td><label for="ProductHeight1">height</label><input name="data[Product][height1]" type="text" value="140" id="ProductHeight1"/></td> 
     <td><label for="ProductWidth1">width</label><input name="data[Product][width1]" type="text" value="295" id="ProductWidth1"/></td> 
     <td><label for="ProductPrice1">List Price</label><input name="data[Product][price1]" type="text" id="ProductPrice1"/></td> 
    </tr> 

    <tr id="2"> 
     <td>2 :<button type="button" class="addRow" id="add_2">add</button></td> 
     <td><label for="ProductHeight2">height</label><input name="data[Product][height2]" type="text" value="140" id="ProductHeight2"/></td> 
     <td><label for="ProductWidth2">width</label><input name="data[Product][width2]" type="text" value="395" id="ProductWidth2"/></td> 
     <td><label for="ProductPrice2">List Price</label><input name="data[Product][price2]" type="text" id="ProductPrice2"/></td> 
    </tr> 

    <tr id="3"> 
     <td>3 :<button type="button" class="addRow" id="add_3">add</button></td> 
     <td><label for="ProductHeight3">height</label><input name="data[Product][height3]" type="text" value="140" id="ProductHeight3"/></td> 
     <td><label for="ProductWidth3">width</label><input name="data[Product][width3]" type="text" value="495" id="ProductWidth3"/></td> 
     <td><label for="ProductPrice3">List Price</label><input name="data[Product][price3]" type="text" id="ProductPrice3"/></td> 
    </tr> 

    </tbody> 
</table> 

Answer 1

あなたはjQueryのappend機能します：closest機能が歩み寄る

$(this).closest('TR').after($html); 

：

$('#productstable TBODY').append($html); 

これを使用し、クリックされたボタンを含む行の後に行を追加するには最も近いTRを見つける木は、afterの後に置くでしょう。ここで

Answer 2

あなたは行の後を追加することができます方法は次のとおりです。（あなたがafterなくappendを使用する必要があります）

$(".button_class").closest("tr").after("<tr>... contents of row ...</tr>"); 

相続人は、私がこれを証明するために書いたlive example。