我有以下HTML表格。
<table id="sample_editable_1" role="grid" aria describedby="sample_editable_1_info">
<tbody>
<tr role="row" class="odd">
<td class="sorting_1">
<input type="text" class="form-control" value=""> </td>
<td>
<input type="text" class="form-control" value=""> </td>
<td>
<input type="text" class="form-control" value=""> </td>
<td class="center">
<button id="sample_editable_1_new" class="btn green"> <i class="fa fa-plus"></i> </button>
</td>
</tr>
</tbody>
</table>
当我点击带有&#34; btn green&#34;的按钮时,我通过使用委托的事件处理程序生成一个新行,如下所示。
$('#sample_editable_1').on('click', ".btn green", function() {
$(".odd:last").after('<<tr role="row" class="odd"><td class="sorting_1"> <input type="text" class="form-control" value=""> </td><td> <input type="text" class="form-control" value=""> </td><td> <input type="text" class="form-control" value=""> </td><td class="center"><button id="sample_editable_1_new" class="btn green"> <i class="fa fa-plus"></i> </button></td></tr>');
});
然而,当我创建一个新行时,我需要&#34;添加新的&#34;上一行的按钮消失了。我可以在jQuery中使用hide()函数,但是如何访问上一行?以下不起作用。
$( row ).prev()
答案 0 :(得分:1)
您可以hide()
使用this
上下文点击的按钮。此外,您的选择器不正确,应该是".btn.green"
而不是".btn green"
$('#sample_editable_1').on('click', ".btn.green", function() {
$(this).hide();
//Rest of the code
});
$('#sample_editable_1').on('click', ".btn.green", function() {
$(this).hide();
$(".odd:last").after('<tr role="row" class="odd"><td class="sorting_1"> <input type="text" class="form-control" value=""> </td><td> <input type="text" class="form-control" value=""> </td><td> <input type="text" class="form-control" value=""> </td><td class="center"><button id="sample_editable_1_new" class="btn green"> <i class="fa fa-plus"></i> Add</button></td></tr>');
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table id="sample_editable_1" role="grid" aria describedby="sample_editable_1_info">
<tbody>
<tr role="row" class="odd">
<td class="sorting_1">
<input type="text" class="form-control" value="">
</td>
<td>
<input type="text" class="form-control" value="">
</td>
<td>
<input type="text" class="form-control" value="">
</td>
<td class="center">
<button id="sample_editable_1_new" class="btn green"> <i class="fa fa-plus">Add</i>
</button>
</td>
</tr>
</tbody>
</table>
答案 1 :(得分:1)
你不能隐藏刚被点击的按钮,即
$('#sample_editable_1').on('click', ".btn green", function() {
$(".odd:last").after('<<tr role="row" class="odd"><td class="sorting_1"> <input type="text" class="form-control" value=""> </td><td> <input type="text" class="form-control" value=""> </td><td> <input type="text" class="form-control" value=""> </td><td class="center"><button id="sample_editable_1_new" class="btn green"> <i class="fa fa-plus"></i> </button></td></tr>');
$(this).hide();
});
答案 2 :(得分:0)
我发现有一些东西可以尝试这个,更多Read This one
$("#addrows").click(function () {
$("#mytable").each(function () {
var tds = '<tr>';
jQuery.each($('tr:last td', this), function () {
tds += '<td>' + $(this).html() + '</td>';
});
tds += '</tr>';
if ($('tbody', this).length > 0) {
$('tbody', this).append(tds);
} else {
$(this).append(tds);
}
});
});
答案 3 :(得分:0)
试试这样:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table id="sample_editable_1" role="grid" aria describedby="sample_editable_1_info">
<tbody>
<tr role="row" class="odd">
<td class="sorting_1">
<input type="text" class="form-control" value="">
</td>
<td>
<input type="text" class="form-control" value="">
</td>
<td>
<input type="text" class="form-control" value="">
</td>
<td class="center">
<button id="sample_editable_1_new" class="btn green"> <i class="fa fa- plus">Add</i>
</button>
</td>
</tr>
</tbody>
</table>
Jquery的:
$('#sample_editable_1').on('click', ".btn.green", function() {
$(this).hide();
$(".odd:last").after('<tr role="row" class="odd"><td class="sorting_1"> <input type="text" class="form-control" value=""> </td><td> <input type="text" class="form-control" value=""> </td><td> <input type="text" class="form-control" value=""> </td><td class="center"><button id="sample_editable_1_new" class="btn green"> <i class="fa fa-plus"></i> Add</button></td></tr>');
});
jsfiddle:https://fiddle.jshell.net/f4ux0bcs/