英文:
Add a row in a table below the row in which the add button click using Jquery
问题
我有一个表格，每一行下面都有一个“添加”按钮。我希望当我点击添加按钮时，该行将被添加到我点击“添加”按钮的特定行下面。
<table id="table_id">
<tr>
<th>名</th>
<th>姓</th>
<th>分数</th>
</tr>
<tr>
<td>Jill</td>
<td>Smith</td>
<td>50</td>
<th><button class="add">添加</button>
</tr>
<tr>
<td>Eve</td>
<td>Jackson</td>
<td>94</td>
<th><button class="add">添加</button>
</tr>
<tr>
<td>Adam</td>
<td>Johnson</td>
<td>67</td>
<th><button class="add">添加</button>
</tr>
</table>
</body>
</html>
我使用了以下JS代码。使用索引，但现在不按预期工作。
$(document).ready(function () {
$(".add").click(function () {
var row_index = $(this).closest("tr").index();
var html = "<td>Adam</td><td>'Puja'</td><td>30</td><td><button class='add'>添加</button></td>";
$("#table_id > tbody > tr").eq(row_index + 1).after(html);
});
});
任何帮助都将不胜感激。
英文:
I have a table below which having the the 'Add' button in every row. I want when I click on the add button the row should be added below that specific row where I click ADD button.
<table id="table_id">
<tr>
<th>First Name</th>
<th>Last Name</th>
<th>Points</th>
</tr>
<tr>
<td>Jill</td>
<td>Smith</td>
<td>50</td>
<th><button class="add">Add</button>
</tr>
<tr>
<td>Eve</td>
<td>Jackson</td>
<td>94</td>
<th><button class="add">Add</button>
</tr>
<tr>
<td>Adam</td>
<td>Johnson</td>
<td>67</td>
<th><button class="add">Add</button>
</tr>
</table>
</body>
</html>
I have used the below JS. Using index but now working as expected.
$(document).ready(function () {
$(".add").click(function () {
var row_index = $(this).closest("tr").index();
html = "<td>Adam</td><td>'Puja'</td><td>30</td><td><button
class='add'>Add</button></td>";
("#table_id > tbody > tr").eq(row_index+1).after(html);
});
});
Any help is appreciated.
答案1
得分: 1
function Addrow(e){
var row_index = $(e).closest("tr").index()-1;
html = "
";
$('#table_id > tbody > tr').eq(row_index+1).after(html);
}
| First Name | Last Name | Points | |
|---|---|---|---|
| Jill | Smith | 50 | |
| Eve | Jackson | 94 | |
| Adam | Johnson | 67 |
评论