twitter-bootstrap Bootstrap 模式以确认表行删除
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/23161488/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Bootstrap modal to confirm table row delete
提问by Jason Bash
I am very new to web work and I hope I can get some helpful answers here. I am Using bootstraps framework to design a site and I am running into a small issue. I have a table that has a delete button in the last cell and I would like for the button to delete the entire row. I would like for the delete button to activate a bootstrap modal to confirm the table rows deletion before it is deleted. Basically a warning that you are about to delete the entry yes or no. The yes button obviously would delete the row. Here is what I have so far.
我对网络工作很陌生，我希望我能在这里得到一些有用的答案。我正在使用引导程序框架来设计一个站点，但遇到了一个小问题。我有一个表格，在最后一个单元格中有一个删除按钮，我希望该按钮可以删除整行。我希望删除按钮激活引导模式，以在删除表行之前确认删除表行。基本上是警告您将要删除条目是或否。是按钮显然会删除该行。这是我到目前为止所拥有的。
HTML----
HTML----
<table>
<thead>
<tr>
<th>Content 1</th>
<th>View</th>
<th>Content 2</th>
<th>Status</th>
<th>Edit / View / Delete</th>
</tr>
</thead>
<!-- start: Table Body -->
<tbody>
<tr class="btnDelete" data-id="1">
<td>Content1</td>
<td><a href="#">View</a>
</td>
<td>Content2</td>
<td>Active</td>
<td>
<button id="btnDelete" href="">delete</button>
</td>
</tr>
<tr class="btnDelete" data-id="2">
<td>Content3</td>
<td><a href="#">View</a>
</td>
<td>Content4</td>
<td>Active</td>
<td>
<button id="btnDelete" href="">delete</button>
</td>
</tr>
</tbody>
</table>
<!--/table-collapse -->
<!-- start: Delete Coupon Modal -->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h3 class="modal-title" id="myModalLabel">Warning!</h3>
</div>
<div class="modal-body">
<h4> Are you sure you want to DELETE?</h4>
</div>
<!--/modal-body-collapse -->
<div class="modal-footer">
<button type="button" class="btn btn-danger" id="btnDelteYes" href="#">Yes</button>
<button type="button" class="btn btn-default" data-dismiss="modal">No</button>
</div>
<!--/modal-footer-collapse -->
</div>
<!-- /.modal-content -->
</div>
<!-- /.modal-dialog -->
</div>
<!-- /.modal -->
JS----
JS----
$('#myModal').on('show', function () {
var id = $(this).data('id'),
removeBtn = $(this).find('.danger');
})
$('#btnDelete').on('click', function (e) {
e.preventDefault();
var id = $(this).data('id');
$('#myModal').data('id', id).modal('show');
});
$('.btnDelteYes').click(function () {
// handle deletion here
var id = $('#myModal').data('id');
$('[data-id=' + id + ']').remove();
$('#myModal').modal('hide');
});
Obviously I am using the bootstrap css etc.
显然我正在使用引导程序 css 等。
I hope I have given enough info to help solve my issue.
我希望我提供了足够的信息来帮助解决我的问题。
Any help would be greatly appreciated!
任何帮助将不胜感激！
Here is a Fiddle:
这是一个小提琴：
回答by Kyle Needham
You have a few things wrong:
你有几件事错了：
Problem 1
问题一
An id attribute must be unique, it is used twice in your example.
id 属性必须是唯一的，在您的示例中使用了两次。
<button id="btnDelete" href="">delete</button>
<button id="btnDelete" href="">delete</button>
Problem 2
问题二
You do not need this code at all, however if you need it in the future use .on('show.bs.modal', func...)
您根本不需要此代码，但是如果您将来需要它，请使用 .on('show.bs.modal', func...)
$('#myModal').on('show.bs.modal', function () {
var id = $(this).data('id'),
removeBtn = $(this).find('.danger');
});
Problem 3
问题三
$(this)here refers to the btnDeletebutton, which does not have a data-id attribute, the data-idis set on your tr
$(this)这里指的是btnDelete按钮，它没有 data-id 属性，data-id设置在你的tr
$('#btnDelete').on('click', function (e) {
e.preventDefault();
var id = $(this).data('id');
$('#myModal').data('id', id).modal('show');
});
Working fiddle herewith above errors corrected.
在这里工作并纠正了上述错误。
