Question

我在网格中有多行。第一列是一个复选框。如果我选中该复选框并单击删除按钮，则应删除选中的行。 Incase如果我随机检查超过10行，则应删除所选行。我怎么能用jquery做到这一点。

请看这个小提琴。在这里，如果我选择第2行和第5行复选框，如果我按删除按钮，则应删除第2行和第5行。它应该动态发生，而不是静态发生。作为一个例子，我有第2和第5的维度。如果我在表中选中多个复选框，则需要删除所有选定的行。请帮帮我怎么做？

#codexpl th, #codexpl td{
    padding:0.8em;
    border: 1px solid;
}
#codexpl th{
    background-color:#6699FF;
    font-weight:bold;
}

<br><br>
<input type="button" value ="Delete">
<table id="codexpl">
    <tr>
        <th>#</th>
        <th>Columna</th>
        <th>Relative</th>
        <th>Isso</th>
    </tr>
    <tr>
        <td><input type="checkbox"></td>
        <td>This</td>
        <td>Column</td>
        <td>Is</td>
    </tr>
    <tr>
        <td><input type="checkbox"></td>
        <td>Coloumn</td>
        <td>two</td>
        <td>this</td>
    </tr>
    <tr>
        <td><input type="checkbox"></td>
        <td>is</td>
        <td>not equals</td>
        <td>a</td>
    </tr>
    <tr>
        <td><input type="checkbox"></td>
        <td>the</td>
        <td>Column</td>
        <td>real</td>
    </tr>
    <tr>
        <td><input type="checkbox"></td>
        <td>first</td>
        <td>One</td>
        <td>Coloumn</td>
    </tr>
</table>

Answer 1

在on上使用button处理程序并使用:checked选择器查找已选中的元素。

.remove()将从DOM

中删除一组匹配的元素

试试这个：

＆＃13;

$('[type="button"]').on('click', function() {
  $('td input:checked').closest('tr').remove();
});

＆＃13;

#codexpl th,
#codexpl td {
  padding: 0.8em;
  border: 1px solid;
}
#codexpl th {
  background-color: #6699FF;
  font-weight: bold;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<br>
<br>
<input type="button" value="Delete">
<table id="codexpl">
  <tr>
    <th>#</th>
    <th>Columna</th>
    <th>Relative</th>
    <th>Isso</th>
  </tr>
  <tr>
    <td>
      <input type="checkbox">
    </td>
    <td>This</td>
    <td>Column</td>
    <td>Is</td>
  </tr>
  <tr>
    <td>
      <input type="checkbox">
    </td>
    <td>Coloumn</td>
    <td>two</td>
    <td>this</td>
  </tr>
  <tr>
    <td>
      <input type="checkbox">
    </td>
    <td>is</td>
    <td>not equals</td>
    <td>a</td>
  </tr>
  <tr>
    <td>
      <input type="checkbox">
    </td>
    <td>the</td>
    <td>Column</td>
    <td>real</td>
  </tr>
  <tr>
    <td>
      <input type="checkbox">
    </td>
    <td>first</td>
    <td>One</td>
    <td>Coloumn</td>
  </tr>
</table>

＆＃13;

Fiddle here

Answer 2

使用.on()绑定Delete按钮的点击处理程序，找到:checked复选框，然后使用.closest()方法遍历tr元素，然后使用.remove()

为简单起见，我在按钮中添加了btnDelete

的ID

$(function() {
  $('#btnDelete').on('click', function() {
    $('#codexpl :checkbox:checked').closest('tr').remove();
  });
});

＆＃13;

$(function() {
  $('#btnDelete').on('click', function() {
    $('#codexpl :checkbox:checked').closest('tr').remove();
  });
});

＆＃13;

#codexpl th,
#codexpl td {
  padding: 0.8em;
  border: 1px solid;
}
#codexpl th {
  background-color: #6699FF;
  font-weight: bold;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<br>
<br>
<input type="button" id="btnDelete" value="Delete">
<table id="codexpl">
  <tr>
    <th>#</th>
    <th>Columna</th>
    <th>Relative</th>
    <th>Isso</th>
  </tr>
  <tr>
    <td>
      <input type="checkbox">
    </td>
    <td>This</td>
    <td>Column</td>
    <td>Is</td>
  </tr>
  <tr>
    <td>
      <input type="checkbox">
    </td>
    <td>Coloumn</td>
    <td>two</td>
    <td>this</td>
  </tr>
  <tr>
    <td>
      <input type="checkbox">
    </td>
    <td>is</td>
    <td>not equals</td>
    <td>a</td>
  </tr>
  <tr>
    <td>
      <input type="checkbox">
    </td>
    <td>the</td>
    <td>Column</td>
    <td>real</td>
  </tr>
  <tr>
    <td>
      <input type="checkbox">
    </td>
    <td>first</td>
    <td>One</td>
    <td>Coloumn</td>
  </tr>
</table>

＆＃13;

Answer 3

试试这个：为删除按钮注册一个点击处理程序（将一些id分配给按钮，如下所示）。在单击处理程序内部，找到表中的所有复选框，并使用最接近的。在父tr上调用remove。

注意：不要忘记在代码中包含jQuery库文件。例如<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>

HTML：<input type="button" value="Delete" id="deleteBtn">

jQuery的：

$(function() {
  $("#deleteBtn").click(function() {
    $("#codexpl").find("input[type='checkbox']:checked").closest("tr").remove();
  });
});

JSFiddle Link

在jquery中删除多个选定的行

3 个答案: