如何根据每个 ID 的 jquery 计数阻止用户删除表中的所有 tr？

Question

我有一个显示数据列表的表格。用户可以动态删除行。我也有 jquery 来帮助我计算每个 unqiue trip id 的出现次数。我想阻止用户删除链接到特定行程 ID 的所有行。例如，如果用户删除trip id 35KH1 行直到它保持为1，我wan jquery 来停止从beeing 进行的删除。我怎样才能做到这一点？我的数据表的图像和一个显示每个唯一 ID 出现次数的弹出框下面是我的表格代码（示例）：<table id="timelist">    <tr>        <th>Trip ID</th>        <th>Delete</th>    </tr>    <tbody>        <tr>            <td>35KH1</td>            <td><a href='#' class='deleterow'>Delete Row</a></td>        </tr>        <tr>            <td>35KH1</td>            <td><a href='#' class='deleterow'>Delete Row</a></td>        </tr>        <tr>            <td>35KH1</td>            <td><a href='#' class='deleterow'>Delete Row</a></td>        </tr>        <tr>            <td>35KH1</td>            <td><a href='#' class='deleterow'>Delete Row</a></td>        </tr>        <tr>            <td>35KH1</td>            <td><a href='#' class='deleterow'>Delete Row</a></td>        </tr>        <tr>            <td>35KH1</td>            <td><a href='#' class='deleterow'>Delete Row</a></td>        </tr>        <tr>            <td>35KH2</td>            <td><a href='#' class='deleterow'>Delete Row</a></td>        </tr>        <tr>            <td>35KH2</td>            <td><a href='#' class='deleterow'>Delete Row</a></td>        </tr>        <tr>            <td>35KH3</td>            <td><a href='#' class='deleterow'>Delete Row</a></td>        </tr>        <tr>            <td>35KH3</td>            <td><a href='#' class='deleterow'>Delete Row</a></td>        </tr>    </tbody></table>这是我的jQuery代码：/********count number of occurence per unqiue ID***********/function count(){    var tripids = {};    $('#timelist tr td:nth-child(1)').each(function(r, val){        var tripid = $(this).text();        if(tripid in tripids){            tripids[tripid] = tripids[tripid] + 1;        }else{            tripids[tripid] = 1;            }    });

Answer 1

将<td>每个的第一个值<tr>作为相同的类，<tr>然后修改删除代码，如下所示：-

$(document).on('click', '.deleterow', function() {

  var classofRow = $(this).closest('tr').attr('class');

  var rowlength = $('table').find('.'+classofRow).length;

  if(rowlength > 1){

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

  }else{

    alert("can't remove single record for "+classofRow);

  }

});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<table id="timelist">

  <tr>

    <th>Trip ID</th>

    <th>Delete</th>

  </tr>

  <tbody>

    <tr class="35KH1">

      <td>35KH1</td>

      <td><a href='#' class='deleterow'>Delete Row</a></td>

    </tr>

    <tr class="35KH1">

      <td>35KH1</td>

      <td><a href='#' class='deleterow'>Delete Row</a></td>

    </tr>

    <tr class="35KH1">

      <td>35KH1</td>

      <td><a href='#' class='deleterow'>Delete Row</a></td>

    </tr>

    <tr class="35KH1">

      <td>35KH1</td>

      <td><a href='#' class='deleterow'>Delete Row</a></td>

    </tr>

    <tr class="35KH1">

      <td>35KH1</td>

      <td><a href='#' class='deleterow'>Delete Row</a></td>

    </tr>

    <tr class="35KH1">

      <td>35KH1</td>

      <td><a href='#' class='deleterow'>Delete Row</a></td>

    </tr>

    <tr class="35KH2">

      <td>35KH2</td>

      <td><a href='#' class='deleterow'>Delete Row</a></td>

    </tr>

    <tr class="35KH2">

      <td>35KH2</td>

      <td><a href='#' class='deleterow'>Delete Row</a></td>

    </tr>

    <tr class="35KH3">

      <td>35KH3</td>

      <td><a href='#' class='deleterow'>Delete Row</a></td>

    </tr>

    <tr class="35KH3">

      <td>35KH3</td>

      <td><a href='#' class='deleterow'>Delete Row</a></td>

    </tr>

  </tbody>

</table>

注意：- 正如@Barmar 所说：

.attr('class')如果您想添加其他可能用于 . 的类，使用会使事情变得困难。CSS使用类似的东西可能会更好data-trip-id="35KH1"

代码示例：- https://jsfiddle.net/bhn5gftc/1/

Answer 2

我假设这些行是动态创建的。如果这是真的，那么您应该向包含三标识的按钮添加一个数据属性：

<tr>

    <td>35KH1</td>

    <td><a href='#' class='deleterow' data-tripid='35KH1'>Delete Row</a></td>

</tr>

现在您可以禁用基于tripid的按钮：

for(var tripid in tripids){

    result += tripid + ':' + tripids[tripid] + '\n';

    number += tripids[tripid]

    if (tripids[tripid] === 1) {

        $('a[data-tripid=' + tripid + ']').attr('disabled', true);

    }

}