如何在javascript中添加带有delete按钮的<tr>
如何在javascript中添加带有delete按钮的<tr>
提问于 2019-01-03 19:16:49
我已经实现了添加带有删除按钮和编辑按钮的<tr>的JavaScript函数。新添加的删除按钮不能正常工作。编辑按钮工作正常。
当我手动添加一个新的<tr>时，它可以正常工作。请帮我解决这个问题。我在下面提到了我的代码。
newFile.html
<table class="table table-striped" id="maintable">
<thead>
<tr>
<th>Game Code#</th>
<th>Description</th>
<th>Subtotal</th>
<th></th>
</tr>
</thead>
<tbody>
<tr>
<td>CHT01</td>
<td>2. Haricane Women</td>
<td>LKR. 500.00</td>
<td style="float: right">
<button type="button" class="btn btn-secondary btn-sm waves-effect waves-light" data-toggle="modal" data-target="#formemodal"><i class="fa fa-edit"></i> Edit</button>
<button type="button" class="btn btn btn-sm waves-effect waves-light delete"><i class="fa fa-bitbucket" ></i> Delete</button>
</td>
</tr>
</tbody>
</table>
<script>
$("#addnewrecord").click(function () {
$("#maintable").each(function () {
var tds = '<tr>';
//*jQuery.each($('tr:last td', this), function () {*
tds += '<td>' + $('#inputGroupSelect01code option:selected').text(); + '</td>';
tds += '<td>' + $('#inputGroupSelect01dscr option:selected').text(); + '</td>';
tds += '<td> LKR.' + $('#bidprice').val(); + '</td>';
tds += '<td style="float: right"> <button type="button" class="btn btn-secondary btn-sm waves-effect waves-light" data-toggle="modal" data-target="#formemodal"><i class="fa fa-edit"></i> Edit</button> <button type="button" class="btn btn btn-sm waves-effect waves-light delete"><i class="fa fa-bitbucket" ></i> Delete</button> </td>';
/*});*/
tds += '</tr>';
if ($('tbody', this).length > 0) {
$('tbody', this).append(tds);
} else {
$(this).append(tds);
}
});
});
</script>newfile.js
$(document).ready(function(){
function SomeDeleteRowFunction(table,child) {
table.find(child).remove();
// you can also play with table and child (child is tr)
}
$(".delete").click(function(){
swal({
title: "Are you sure?",
text: "Once deleted, you will not be able to recover this imaginary file!",
icon: "warning",
buttons: true,
dangerMode: true,
})
.then((willDelete) => {
if (willDelete) {
var $tbl = $(this).closest('table');
var $tr = $(this).closest('tr');
SomeDeleteRowFunction($tbl,$tr);
swal("Poof! Your imaginary file has been deleted!", {
icon: "success",
});
} else {
swal("Your imaginary file is safe!");
}
});
});
});
});回答 2
Stack Overflow用户
发布于 2019-01-03 19:21:04
在创建元素之后，您需要重新加载onclick操作。您可以添加到js中。
function loadClick () {
$(".delete").click(function(){
swal({
title: "Are you sure?",
text: "Once deleted, you will not be able to recover this imaginary file!",
icon: "warning",
buttons: true,
dangerMode: true,
})
.then((willDelete) => {
if (willDelete) {
var $tbl = $(this).closest('table');
var $tr = $(this).closest('tr');
SomeDeleteRowFunction($tbl,$tr);
swal("Poof! Your imaginary file has been deleted!", {
icon: "success",
});
} else {
swal("Your imaginary file is safe!");
}
});
});
}在你的html中：
if ($('tbody', this).length > 0) {
$('tbody', this).append(
}
else {
$(this).append(
}
loadClick();Stack Overflow用户
发布于 2019-01-04 03:44:22
注意我是如何处理它的，但这有点整洁，而且仍然是针对您的html -我不清楚swal是什么，一个承诺-当它返回时，它的价值是什么？
swal可以在我确认的地方进行替换--但我建议使用window.confirm让它正常工作。
$(document).ready( function() {
let dFunc = function() {
console.log( this); // this is a tr to be sure
let tr = $(this);
if ( window.confirm( 'are you sure ?')) { // or whatever swal is
tr.remove();
}
}
$(".delete").on('click', function(e){ // jquery style
dFunc.call( $(this).closest('tr')); // "call" dFunc on the tr
});
// above has taken care of what is on the page
$("#addnewrecord").click(function () {
$("#maintable").each( function () { // each - ? ok ? multiple ?
var btn = $('<button type="button" class="btn btn btn-sm waves-effect waves-light delete"><i class="fa fa-bitbucket" ></i> Delete</button>');
btn.on('click', function(e){ // jquery style
dFunc.call( $(this).closest('tr')); // "call" dFunc on the tr
});
var tds = $('<tr />');
//*jQuery.each($('tr:last td', this), function () {*
tds.append( '<td />').html( $('#inputGroupSelect01code option:selected').text());
tds.append( '<td />').html( $('#inputGroupSelect01dscr option:selected').text());
tds.append( '<td />').html( 'LKR.' + $('#bidprice').val());
var cell = $('<td style="float: right"><button type="button" class="btn btn-secondary btn-sm waves-effect waves-light" data-toggle="modal" data-target="#formemodal"><i class="fa fa-edit"></i> Edit</button></td>');
cell.append( btn); // btn already has click active and defined
/*});*/
if ($('tbody', this).length > 0) {
$('tbody', this).append(tds);
} else {
$(this).append(tds);
}
});
});
});页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/54021252
复制相关文章
相似问题