javascript JQuery 在位置插入表行
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/9705198/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
JQuery insert table row at postion
提问by fuzzy dunlop
Ive been working on a solution to being able to insert a row to a html table. Its been quite tricky. Ive found something that works but only for the first "insert". I cant figure out what im doing wrong.
我一直在研究能够在 html 表中插入一行的解决方案。它非常棘手。我发现了一些有效但仅适用于第一个“插入”的东西。我无法弄清楚我做错了什么。
Ive a basic table with 3 colums each table has a button to allow the insertion of a row between 2 rows. Ive searhed on this site for a solution and got a jquery solution that works i.e when i press the button it adds the row where i want it. But when i add another row after where i inserted the last row, the row is inserted 1 position back, the next time i press the button its inserted 2 rows back etc. I cant figure out what im doing wrong any one know why its doing this?
我有一个带有 3 列的基本表格，每个表格都有一个按钮，允许在 2 行之间插入一行。我在这个网站上搜索了一个解决方案，并得到了一个有效的 jquery 解决方案，即当我按下按钮时，它会在我想要的地方添加行。但是当我在插入最后一行之后添加另一行时，该行被插入 1 个位置，下次我按下按钮时，它插入了 2 行等。我不知道我做错了什么任何人都知道为什么这样做这？
Even better is there a better way to do this? i.e add a row into a table at any postion?
更好的是有没有更好的方法来做到这一点？即在任何位置向表中添加一行？
JQuery code;
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>
My table looks like this;
我的桌子看起来像这样；
<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>
回答by Jon Grant
You want the JQuery appendfunction:
你想要 JQueryappend函数：
$('#productstable TBODY').append($html);
To add a row after the row containing the button that was clicked, use this:
要在包含单击的按钮的行之后添加一行，请使用以下命令：
$(this).closest('TR').after($html);
The closestfunction walks up the tree to find the nearest TR, then afterwill put it after it.
该closest函数沿着树向上走以找到最近的 TR，然后after将其放在它之后。
回答by Ben
Here's how you can append aftera row: (you need to use afterand not append)
以下是在一行后追加的方法：（您需要使用after而不是append）
$(".button_class").closest("tr").after("<tr>... contents of row ...</tr>");
Heres a live examplethat I wrote to demonstrate this.
这是我写的一个活生生的例子来证明这一点。
