Bootstrap模式确认表格行删除 [英] Bootstrap modal to confirm table row delete
问题描述
我对网络工作很陌生，希望在这里可以得到一些有用的答案。我正在使用bootstraps框架来设计一个网站，我遇到了一个小问题。我有一个表在最后一个单元格中有一个删除按钮，我希望按钮可以删除整行。我想要删除按钮来激活引导模式，以确认删除表之前删除表格行。基本上是警告您即将删除条目是或否。 yes按钮显然会删除该行。这是我到目前为止。
HTML ----
<表>
< thead>
< tr>
< th>内容1< / th>
< th> View< / th>
< th>内容2< / th>
< th>状态< / th>
编辑/查看/删除< / th>
< / tr>
< / thead>
<！ - start：表格主体 - >
< tbody>
< tr class =btnDeletedata-id =1>
< td> Content1< / td>
< td>< a href =＃>查看< / a>
< / td>
< td> Content2< / td>
< td>活动< / td>
< td>
< button id =btnDeletehref =>删除< / button>
< / td>
< / tr>
< tr class =btnDeletedata-id =2>
< td> Content3< / td>
< td>< a href =＃>查看< / a>
< / td>
< td> Content4< / td>
< td>活动< / td>
< td>
< button id =btnDeletehref =>删除< / button>
< / td>
< / tr>
< / tbody>
< / table>
<！ - / table-collapse - >
<！ - 开始：删除优惠券模式 - >
< div class =modal fadeid =myModaltabindex = - 1role =dialogaria-labelledby =myModalLabelaria-hidden =true>
< div class =modal-dialog>
< div class =modal-content>
< div class =modal-header>
< button type =buttonclass =closedata-dismiss =modalaria-hidden =true>& times;< / button>
< h3 class =modal-titleid =myModalLabel>警告！< / h3>
< / div>
< div class =modal-body>
< h4>您确定要删除吗？< / h4>
< / div>
<！ - / modal-body-collapse - >
< div class =modal-footer>
< button type =buttonclass =btn btn-dangerid =btnDelteYeshref =＃>是< / button>
< button type =buttonclass =btn btn-defaultdata-dismiss =modal>否< / button>
< / div>
<！ - / modal-footer-collapse - >
< / div>
<！ - /.modal-content - >
< / div>
<！ - - /.modal-dialog - >
< / div>
<！ - /.modal - >
JS ----
<$ p $ （'show'，function（）{
var id = $（this）.data（'id'），
removeBtn（'code> $''myModal' ='（this）.find（'。danger'）;
}）
$（'＃btnDelete'）。on（'click'，function（e）{
e.preventDefault （）;
var id = $（this）.data（'id'）;
$（'＃myModal'）。data（'id'，id）.modal（'show'）;
}）;
$（'。btnDelteYes'）。click（function（）{
//在这里删除句柄
var id = $（'＃myModal'）。data（'id'）;
$（'[data-id ='+ id +']'）。remove（）;
$（'＃myModal'）。modal（'hide'）;
}）;
显然我使用引导CSS等。
我希望我已经提供了足够的信息来帮助解决我的问题。
任何帮助将不胜感激！
以下是小提琴：
您有几件事情是错误的：
问题1
<
< button id =btnDeletehref = >删除< /按钮>
< button id =btnDeletehref =>删除< / button>
问题2
你完全不需要这个代码，但是如果你将来需要使用 .on（'show.bs.modal'，func ...） $ b
$（'＃myModal'）。
var id = $（this）.data（'id'），
removeBtn = $（this）.find（'。danger'）;
}）;
问题3
$（this）指的是 btnDelete 按钮，它没有数据-id属性，在 tr
$ b $上设置
data-id b（pre> $（'＃btnDelete'）。on（'click'，function（e）{
e.preventDefault（）;
var id = $ （this）.data（'id'）;
$（'＃myModal'）。data（'id'，id）.modal（'show'）;
}）;
在这里工作的小提琴 ，并纠正了上述错误。
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----
<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----
$('#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.
I hope I have given enough info to help solve my issue.
Any help would be greatly appreciated!
Here is a Fiddle:
You have a few things wrong:
Problem 1
An id attribute must be unique, it is used twice in your example.
<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...)
$('#myModal').on('show.bs.modal', function () {
var id = $(this).data('id'),
removeBtn = $(this).find('.danger');
});
Problem 3
$(this) here refers to the btnDelete button, which does not have a data-id attribute, the data-id is set on your tr
$('#btnDelete').on('click', function (e) {
e.preventDefault();
var id = $(this).data('id');
$('#myModal').data('id', id).modal('show');
});
Working fiddle here with above errors corrected.
这篇关于Bootstrap模式确认表格行删除的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
