如何根据每个 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() {&nbsp; var classofRow = $(this).closest('tr').attr('class');&nbsp; var rowlength = $('table').find('.'+classofRow).length;&nbsp; if(rowlength > 1){&nbsp; &nbsp; $(this).closest('tr').remove();&nbsp; }else{&nbsp; &nbsp; alert("can't remove single record for "+classofRow);&nbsp; }});<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script><table id="timelist">&nbsp; <tr>&nbsp; &nbsp; <th>Trip ID</th>&nbsp; &nbsp; <th>Delete</th>&nbsp; </tr>&nbsp; <tbody>&nbsp; &nbsp; <tr class="35KH1">&nbsp; &nbsp; &nbsp; <td>35KH1</td>&nbsp; &nbsp; &nbsp; <td><a href='#' class='deleterow'>Delete Row</a></td>&nbsp; &nbsp; </tr>&nbsp; &nbsp; <tr class="35KH1">&nbsp; &nbsp; &nbsp; <td>35KH1</td>&nbsp; &nbsp; &nbsp; <td><a href='#' class='deleterow'>Delete Row</a></td>&nbsp; &nbsp; </tr>&nbsp; &nbsp; <tr class="35KH1">&nbsp; &nbsp; &nbsp; <td>35KH1</td>&nbsp; &nbsp; &nbsp; <td><a href='#' class='deleterow'>Delete Row</a></td>&nbsp; &nbsp; </tr>&nbsp; &nbsp; <tr class="35KH1">&nbsp; &nbsp; &nbsp; <td>35KH1</td>&nbsp; &nbsp; &nbsp; <td><a href='#' class='deleterow'>Delete Row</a></td>&nbsp; &nbsp; </tr>&nbsp; &nbsp; <tr class="35KH1">&nbsp; &nbsp; &nbsp; <td>35KH1</td>&nbsp; &nbsp; &nbsp; <td><a href='#' class='deleterow'>Delete Row</a></td>&nbsp; &nbsp; </tr>&nbsp; &nbsp; <tr class="35KH1">&nbsp; &nbsp; &nbsp; <td>35KH1</td>&nbsp; &nbsp; &nbsp; <td><a href='#' class='deleterow'>Delete Row</a></td>&nbsp; &nbsp; </tr>&nbsp; &nbsp; <tr class="35KH2">&nbsp; &nbsp; &nbsp; <td>35KH2</td>&nbsp; &nbsp; &nbsp; <td><a href='#' class='deleterow'>Delete Row</a></td>&nbsp; &nbsp; </tr>&nbsp; &nbsp; <tr class="35KH2">&nbsp; &nbsp; &nbsp; <td>35KH2</td>&nbsp; &nbsp; &nbsp; <td><a href='#' class='deleterow'>Delete Row</a></td>&nbsp; &nbsp; </tr>&nbsp; &nbsp; <tr class="35KH3">&nbsp; &nbsp; &nbsp; <td>35KH3</td>&nbsp; &nbsp; &nbsp; <td><a href='#' class='deleterow'>Delete Row</a></td>&nbsp; &nbsp; </tr>&nbsp; &nbsp; <tr class="35KH3">&nbsp; &nbsp; &nbsp; <td>35KH3</td>&nbsp; &nbsp; &nbsp; <td><a href='#' class='deleterow'>Delete Row</a></td>&nbsp; &nbsp; </tr>&nbsp; </tbody></table>注意：- 正如@Barmar 所说：.attr('class')如果您想添加其他可能用于 . 的类，使用会使事情变得困难。CSS使用类似的东西可能会更好data-trip-id="35KH1"代码示例：- https://jsfiddle.net/bhn5gftc/1/

Answer 2

我假设这些行是动态创建的。如果这是真的，那么您应该向包含三标识的按钮添加一个数据属性：<tr>&nbsp; &nbsp; <td>35KH1</td>&nbsp; &nbsp; <td><a href='#' class='deleterow' data-tripid='35KH1'>Delete Row</a></td></tr>现在您可以禁用基于tripid的按钮：for(var tripid in tripids){&nbsp; &nbsp; result += tripid + ':' + tripids[tripid] + '\n';&nbsp; &nbsp; number += tripids[tripid]&nbsp; &nbsp; if (tripids[tripid] === 1) {&nbsp; &nbsp; &nbsp; &nbsp; $('a[data-tripid=' + tripid + ']').attr('disabled', true);&nbsp; &nbsp; }}