[英]Delete button in not working on table
我创建了一个表，其中删除/擦除按钮对我不起作用。 我已经尽力了，但它对我不起作用。请帮助我如何使这个擦除按钮可用。
$(".butnBorrar").click(function(event) { $("#table125").each(function() { $(this).closest('tds').remove(); }); }); $("#insert15").click(function() { $("#table125").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); } }); });
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script> <table id="table125" class="table table-bordered table-hover"> <input type="button" class="btn green" value="Add New+" id="insert15"></input> <thead> <th>Subject</th> <th>Marks</th> </thead> <tbody> <tr> <td> <input type="text" class="form-control subject1" name="subject1"> </td> <td> <input type="text" class="form-control marks1 allownumericwithoutdecimal" name="marks1"> </td> <td class="total"> <button type="button" class="butnBorrar"> Erase </button> </td> </tr> </tbody> </table>
这是一个完全有效的示例：-
注意-> 这种处理点击的技术称为事件冒泡，用于将动态 HTML 添加到您的页面。
$(document).on('click','.butnBorrar',function(event) { //console.log('clicked'); $(this).closest('tr').remove(); }); var template = $('#table125 > tbody:last-child').html(); $("#insert15").click(function() { $('#table125 > tbody:last-child').append(template); }); <!DOCTYPE html> <html> <head> <link rel="stylesheet" href="style.css"> <script src="script.js"></script> </head> <body> <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script> <table id="table125" class="table table-bordered table-hover"> <input type="button" class="btn green" value="Add New+" id="insert15"></input> <thead> <th>Subject</th> <th>Marks</th> </thead> <tbody> <tr> <td> <input type="text" class="form-control subject1" name="subject1"> </td> <td> <input type="text" class="form-control marks1 allownumericwithoutdecimal" name="marks1"> </td> <td class="total"> <button type="button" class="butnBorrar"> Erase </button> </td> </tr> </tbody> </table> </body> </html>
希望能帮助到你。
你需要这样做
$(document).on('click', '.butnBorrar', function(event) {
$(this).parent().parent().remove();
// OR
$(this).closest('tr').remove();
});
$(document).on('click', '.butnBorrar', function(event) { //$("#table125").each(function() { $(this).parent().parent().remove(); //or //$(this).closest('tr').remove(); //}); }); $("#insert15").click(function() { $("#table125").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); } }); });
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <table id="table125" class="table table-bordered table-hover"> <input type="button" class="btn green" value="Add New+" id="insert15"></input> <thead> <th>Subject</th> <th>Marks</th> </thead> <tbody> <tr> <td> <input type="text" class="form-control subject1" name="subject1"> </td> <td> <input type="text" class="form-control marks1 allownumericwithoutdecimal" name="marks1"> </td> <td class="total"> <button type="button" class="butnBorrar"> Erase </button> </td> </tr> </tbody> </table>
您应该使用 $(document).on('click', '.butnBorrar' 代替：
$(document).on('click', '.butnBorrar' , function(event) {
$(this).closest('tr').remove();
});
这样 jQuery 会侦听文档上的点击事件，如果目标元素是.butnBorrar （例如） - 该函数将被触发。 元素是否动态添加无关紧要 - 单击事件始终在文档上，jQuery 将检查目标元素（并相应地采取行动）。
这是您的代码段的更新：
$(function(){ $(document).on('click', '.butnBorrar' , function(event) { $(this).closest('tr').remove(); }); $("#insert15").click(function() { $("#table125").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); } }); }); });
<table id="table125" class="table table-bordered table-hover"> <input type="button" class="btn green" value="Add New+" id="insert15"></input> <thead> <th>Subject</th> <th>Marks</th> </thead> <tbody> <tr> <td> <input type="text" class="form-control subject1" name="subject1"> </td> <td> <input type="text" class="form-control marks1 allownumericwithoutdecimal" name="marks1"> </td> <td class="total"> <button type="button" class="butnBorrar"> Erase </button> </td> </tr> </tbody> </table> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
Bootstrap jQuery动态表编辑/删除/查看按钮不起作用
[英]Bootstrap jQuery dynamic table edit/delete/view button not working
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.