单击按钮后从表中删除行

时间：2016-12-28 23:16:48

标签： javascript jquery

我桌子的每一行都有一个删除按钮。当用户点击删除按钮时，会弹出一个模态提示用户“你是                         确定要删除此记录吗？“。如果用户单击”是“，则该行将从表中删除。

我试过

$(this).closest('tr').remove();

但它不起作用。 

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet"
	href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script
	src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script
	src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<style>
.hidden {
	display: none;
}
</style>
<title>Form</title>

</head>
<body id="page-top" data-spy="scroll" data-target=".navbar-fixed-top">
	<div class="container">
		<div class="panel">
			<div class="row">
				<div class="col-md-12">
					<table id="mytable" class="table">
						<thead>
							<tr>
								<th class="text-center">ID</th>
								<th class="text-center">Name</th>
								<th class="text-center">Delete</th>
							</tr>
						</thead>
						<tbody>
							<tr>
								<td>1</td>
								<td>John</td>
								<td class="text-center"><p data-placement="top"
										data-toggle="tooltip" title="Delete">
										<button class="btn btn-danger btn-xs deletebtn"
											data-title="Delete" data-toggle="modal"
											data-target="#deletemodal">
											<span class="glyphicon glyphicon-trash"></span>
										</button>
									</p></td>
							</tr>
							<tr>
								<td>2</td>
								<td>Mary</td>
								<td class="text-center"><p data-placement="top"
										data-toggle="tooltip" title="Delete">
										<button class="btn btn-danger btn-xs deletebtn"
											data-title="Delete" data-toggle="modal"
											data-target="#deletemodal">
											<span class="glyphicon glyphicon-trash"></span>
										</button>
									</p></td>
							</tr>
							<tr>
								<td>3</td>
								<td>Jane</td>
								<td class="text-center"><p data-placement="top"
										data-toggle="tooltip" title="Delete">
										<button class="btn btn-danger btn-xs deletebtn"
											data-title="Delete" data-toggle="modal"
											data-target="#deletemodal">
											<span class="glyphicon glyphicon-trash"></span>
										</button>
									</p></td>
							</tr>
						</tbody>
					</table>
				</div>
			</div>
		</div>
	</div>
	<div class="modal fade" id="deletemodal" tabindex="-1" role="dialog"
		aria-labelledby="delete" 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">
						<span class="glyphicon glyphicon-remove" aria-hidden="true"></span>
					</button>
					<h4 class="modal-title custom_align" id="Heading">Delete this
						entry</h4>
				</div>
				<div class="modal-body">

					<div class="alert alert-danger">
						<span class="glyphicon glyphicon-warning-sign"></span> Are you
						sure you want to delete this Record?
					</div>

				</div>
				<div class="modal-footer ">
					<button type="button" class="btn btn-success" id="confirmdeletebtn">
						<span class="glyphicon glyphicon-ok-sign"></span> Yes
					</button>
					<button type="button" class="btn btn-default" data-dismiss="modal">
						<span class="glyphicon glyphicon-remove"></span> No
					</button>
				</div>
			</div>
		</div>
	</div>
	<script type="text/javascript">
		$(document).ready(function() {
			$("#confirmdeletebtn").click(function() {
				alert("in delete btn");
				$(this).closest('tr').remove();

			});
		});
	</script>
</body>

</html>

4 个答案:

答案 0 :(得分：4)

一种方法是在单击行中的删除按钮时在行上切换selected类...然后使用模态按钮删除该类的行

$('.deletebtn').click(function(){
   // remove selected class from other rows
   $('tr.selected').removeClass('selected');
   // add selected class to current row
   $(this).closest('tr').addClass('selected');
});

$("#confirmdeletebtn").click(function() {       
    $('tr.selected').remove();
});

答案 1 :(得分：0)

引导模式为relatedTarget和shown.bs.modal事件提供show.bs.modal（点击的元素）。

这样您就可以存储引用并在删除时使用它

$(document).ready(function() {
  
  $('#deletemodal').on('shown.bs.modal', function(e) {
    // store the clicked element as data on the confirm button
    $('#confirmdeletebtn').data('triggered-from', e.relatedTarget);
  });
  
  $("#confirmdeletebtn").click(function() {
    // retrieve the button that triggered the action and use it
    var trigger = $(this).data('triggered-from');
    $(trigger).closest('tr').remove();
    $('#deletemodal').modal('hide');
  });
  
});
@import url('https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css');
 .hidden {
  display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

<body id="page-top" data-spy="scroll" data-target=".navbar-fixed-top">
  <div class="container">
    <div class="panel">
      <div class="row">
        <div class="col-md-12">
          <table id="mytable" class="table">
            <thead>
              <tr>
                <th class="text-center">ID</th>
                <th class="text-center">Name</th>
                <th class="text-center">Delete</th>
              </tr>
            </thead>
            <tbody>
              <tr>
                <td>1</td>
                <td>John</td>
                <td class="text-center">
                  <p data-placement="top" data-toggle="tooltip" title="Delete">
                    <button class="btn btn-danger btn-xs deletebtn" data-title="Delete" data-toggle="modal" data-target="#deletemodal">
                      <span class="glyphicon glyphicon-trash"></span>
                    </button>
                  </p>
                </td>
              </tr>
              <tr>
                <td>2</td>
                <td>Mary</td>
                <td class="text-center">
                  <p data-placement="top" data-toggle="tooltip" title="Delete">
                    <button class="btn btn-danger btn-xs deletebtn" data-title="Delete" data-toggle="modal" data-target="#deletemodal">
                      <span class="glyphicon glyphicon-trash"></span>
                    </button>
                  </p>
                </td>
              </tr>
              <tr>
                <td>3</td>
                <td>Jane</td>
                <td class="text-center">
                  <p data-placement="top" data-toggle="tooltip" title="Delete">
                    <button class="btn btn-danger btn-xs deletebtn" data-title="Delete" data-toggle="modal" data-target="#deletemodal">
                      <span class="glyphicon glyphicon-trash"></span>
                    </button>
                  </p>
                </td>
              </tr>
            </tbody>
          </table>
        </div>
      </div>
    </div>
  </div>
  <div class="modal fade" id="deletemodal" tabindex="-1" role="dialog" aria-labelledby="delete" 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">
            <span class="glyphicon glyphicon-remove" aria-hidden="true"></span>
          </button>
          <h4 class="modal-title custom_align" id="Heading">Delete this
						entry</h4>
        </div>
        <div class="modal-body">

          <div class="alert alert-danger">
            <span class="glyphicon glyphicon-warning-sign"></span> Are you sure you want to delete this Record?
          </div>

        </div>
        <div class="modal-footer ">
          <button type="button" class="btn btn-success" id="confirmdeletebtn">
            <span class="glyphicon glyphicon-ok-sign"></span> Yes
          </button>
          <button type="button" class="btn btn-default" data-dismiss="modal">
            <span class="glyphicon glyphicon-remove"></span> No
          </button>
        </div>
      </div>
    </div>
  </div>
</body>

答案 2 :(得分：0)

this关键字指的是模态对话框中的确认按钮，该按钮与要删除的tr无关。 首先，您必须听取.deletebtn按钮的点击次数。触发时此函数应显示模态对话框并在#confirmdeletebtn按钮上侦听单击事件。如果用户点击它，那么您应该删除关闭被点击的tr按钮的.deletebtn（因此，点击后应该保存它的引用）。

$(function(){
  var clickedBtn = null;
  $(".deletebtn").click(function(){
    clickedBtn = this;

    // show the modal dialog
  });

  $("#confirmdeletebtn").click(function(){
    if(clickedBtn){ // make sure we have assigned a reference
      $(clickedBtn).closest("tr").remove();
      clickedBtn = null; // not necessary

      // close the modal dialog.
    }
  });

  // add listeners for the close and abort buttons of the modal dialog if not already handeled by bootstrap or whatever you're using.
});

答案 3 :(得分：-1)

enter code here         function DeleteRows（）{                 alert（“in delete btn”）;                 $（本）.closest（ '礼'），删除（）;             };

相关问题
最新问题