且构网

分享程序员开发的那些事...
且构网 - 分享程序员编程开发的那些事

Bootstrap模式确认表格行删除

更新时间:2023-12-04 12:26:46

您有几件事情是错误的:

问题1



 < button id =btnDeletehref =  &GT;删除&LT; /按钮&GT; 
< button id =btnDeletehref =>删除< / button>






问题2



你完全不需要这个代码,但是如果你将来需要使用 .on('show.bs.modal',func ...)$ ('show.bs.modal',function(){code $ $ 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">&times;</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.