Question

我当前选择了一行，我想点击删除按钮，删除所选行（我已经选择了行，只需要删除部分）。

我试过了：

$("#deleteBtn").click(function() {
    $(this).closest('tr').remove();
});

HTML

    <table id="splashTable" class="table table-fixed">
      <thead>
        <tr>
          <th class="col-xs-3">First</th>
          <th class="col-xs-3">Last</th>
          <th class="col-xs-6">Age</th>
          <th class="col-xs-6">Salary</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td class="col-xs-3">John</td>
          <td class="col-xs-3">Freeman</td>
          <td class="col-xs-6">36</td>
          <td class="col-xs-6">$53,000</td>
        </tr>

Answer 1

因为我没有看到你所有的html我会假设一个解决方案。

要选择一行，您可以在该行中添加选定类，然后您可以从之前选择的类中删除此类。因此，每次只选择一行。

在删除时，您只需删除包含所选类的行。

$('#splashTable tbody tr').on('click', function(e) {
    $(this).siblings('.selected').removeClass('selected');
    $(this).addClass('selected');
})


$("#deleteBtn").click(function() {
    $('#splashTable tbody tr.selected').remove();
});

.selected {
    background-color: yellow;
}

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://code.jquery.com/jquery-2.1.1.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>


<button id="deleteBtn">Delete selected row</button>
<table id="splashTable" class="table table-fixed">
    <thead>
    <tr>
        <th class="col-xs-3">First</th>
        <th class="col-xs-3">Last</th>
        <th class="col-xs-6">Age</th>
        <th class="col-xs-6">Salary</th>
    </tr>
    </thead>
    <tbody>
    <tr>
        <td class="col-xs-3">John1</td>
        <td class="col-xs-3">Freeman</td>
        <td class="col-xs-6">36</td>
        <td class="col-xs-6">$53,000</td>
    </tr>
    <tr>
        <td class="col-xs-3">John2</td>
        <td class="col-xs-3">Freeman</td>
        <td class="col-xs-6">36</td>
        <td class="col-xs-6">$53,000</td>
    </tr>
    </tbody>
</table>

相反，如果将删除按钮添加到每一行，则解决方案可以是：

$("#splashTable .delete").on('click', function (e) {
    var row = $(this).closest('tr');
    if (row.is('.selected'))
        row.remove();
});

$('#splashTable tbody tr').on('click', function (e) {
    $(this).siblings('.selected').removeClass('selected');
    $(this).addClass('selected');
})


$("#splashTable .delete").on('click', function (e) {
    var row = $(this).closest('tr');
    if (row.is('.selected'))
        row.remove();
});

.selected {
    background-color: yellow;
}

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://code.jquery.com/jquery-2.1.1.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>


<table id="splashTable" class="table table-fixed">
    <thead>
    <tr>
        <th class="col-xs-3">First</th>
        <th class="col-xs-3">Last</th>
        <th class="col-xs-6">Age</th>
        <th class="col-xs-6">Salary</th>
        <th class="col-xs-6">Delete</th>
    </tr>
    </thead>
    <tbody>
    <tr>
        <td class="col-xs-3">John1</td>
        <td class="col-xs-3">Freeman</td>
        <td class="col-xs-6">36</td>
        <td class="col-xs-6">$53,000</td>
        <td><button type="button" class="btn btn-default btn-sm delete"><span class="glyphicon glyphicon-trash"></span></button></td>
    </tr>
    <tr>
        <td class="col-xs-3">John2</td>
        <td class="col-xs-3">Freeman</td>
        <td class="col-xs-6">36</td>
        <td class="col-xs-6">$53,000</td>
        <td><button type="button" class="btn btn-default btn-sm delete"><span class="glyphicon glyphicon-trash"></span></button></td>
    </tr>
    </tbody>
</table>

删除索引为jQuery的表行

1 个答案: