使用jquery在表中动态添加删除行 [英] dynamically add remove rows in table using jquery
本文介绍了使用jquery在表中动态添加删除行的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
我按如下方式构建了我的表:
I have construted my table as follows:
<table id="dataTable">
<thead>
<tr><th>Name</th>
<th>Value</th></tr>
</thead>
<TR><TD>Scooby Doo</TD><TD>6</TD><TD><INPUT TYPE="Button" onClick="AddRow()" VALUE="Add Row"></TD></TR>
</table>
单击添加行按钮时,我需要将按钮更改为删除按钮并插入第一行的新行。第一行必须包含与代码中相同的内容。我该怎么做?
When the button Add Row is clicked, I need to change the button to a delete button and insert a new row on the first line. The first line must contain the same as in the code. How can I do this?
点击删除按钮,Imust能否删除删除按钮所属的行?
On clicking the delete button, Imust be able to delete the row to which the delete button belong?
推荐答案
希望这会有所帮助
$(function(){
$("input[type='button'].AddRow").toggle(
function(){
var el = $(this);
el.closest('tr').clone(true).prependTo(el.closest('table'));
el.attr("value", "Delete row");
},
function(){
$(this).closest('tr').remove();
});
});
<table id="dataTable" border="1">
<thead>
<tr>
<th>
Name
</th>
<th>
Value
</th>
</tr>
</thead>
<tr>
<td>
Scooby Doo
</td>
<td>
6
</td>
<td>
<input type="Button" value="Add Row" class="AddRow">
</td>
</tr>
</table>
Working Demo
这篇关于使用jquery在表中动态添加删除行的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!
查看全文