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

Question

我有一个显示数据列表的表格。用户可以动态删除该行。我也有jquery来帮助我计算每个unqiue旅行ID的出现次数。我想防止用户删除链接到特定行程ID的所有行。例如，如果用户删除行程 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;    
}
});
var result = '';
var number = '';
for(var tripid in tripids){
result += tripid + ':' + tripids[tripid] + 'n';
number += tripids[tripid]
}
alert(result);
}
/********delete rows***********/
$(document).on('click', '.deleterow', function() {
$(this).parent().parent('tr').remove();
count();
});

Answer 1

首先将每个<tr>的值<td>作为相同<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所说：

如果要添加可能用于CSS的其他类，使用.attr('class')会使事情变得困难。使用类似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>

现在，您可以根据三重符禁用按钮：

for(var tripid in tripids){
result += tripid + ':' + tripids[tripid] + 'n';
number += tripids[tripid]
if (tripids[tripid] === 1) {
$('a[data-tripid=' + tripid + ']').attr('disabled', true);
}
}