JQuery在位置插入表行
JQuery insert table row at postion
我一直在研究一种能够将行插入html表的解决方案。这相当棘手。我发现了一些有效的东西,但只适用于第一个"插入"。我想不出我做错了什么。
我有一个3列的基本表格,每张表格都有一个按钮,可以在2行之间插入一行。我在这个网站上搜索了一个解决方案,得到了一个有效的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>
您想要JQuery append
函数:
$('#productstable TBODY').append($html);
要在包含单击按钮的行之后添加一行,请使用以下命令:
$(this).closest('TR').after($html);
closest
函数在树中查找最近的TR,然后after
会将其放在其后。
以下是如何在一行之后附加:(需要使用after
而不是append
)
$(".button_class").closest("tr").after("<tr>... contents of row ...</tr>");
这是我写的一个实例来证明这一点。
相关文章:
- 将插入符号位置移动到ContentEditable<DIV>
- 为更改的输入返回插入符号位置的逻辑
- 获取插入符号相对于行可见起点的位置
- 在输出数字的千分之一位置插入逗号
- JavaScript 在文本区域中的特定位置插入文本
- JavaScript 插入符号位置
- 链接内的内容可编辑块,如何防止重定向,但让文本选择插入符号位置更改
- 在光标位置的文本区域中插入一个字符串,并进行一些更改
- Caret函数没有'如果插入符号在最后一个位置,就不能正常工作
- 是否可以设置柔盒插入、移除和项目位置的动画
- Ajax调用正在将数据插入页面的其他位置
- 如何使用javascript获取&使用字符偏移量设置插入符号位置
- text使用shift键和箭头键时的区域插入符号位置
- 如何在字符串中的特定位置插入变量
- 在插入符号位置获取DOM元素
- 单击时获取文本区域中插入符号的位置
- 将位置插入集合后,重新绘制标记和簇
- 在光标位置插入HTML,并使用javascript将光标移动到插入的HTML的末尾
- 在html中插入iframe的适当位置
- JavaScript插入位置