I have a table that shows a list of data. User can remove the row dynamically. I also have jquery to help me count number of occurrences for each unqiue trip id. I wan to prevent user from removing all rows that is link to a particular trip id. For example, if the user remove trip id 35KH1 row until it remains 1, I wan jquery to stop the removal from beeing carried out. How can i do that?
Image of my table of data and a pop box showing number of occurences for each unique ID
Below is my table code (example):
<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>
Here's my jquery code:
/********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();
});
Put first <td> value of each <tr>as class of the same <tr> and then modify delete code like below:-
$(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>
Note:- As @Barmar said:
Using .attr('class') would make things difficult if you want to add other classes that might be used for CSS.It would probably be better to use something like data-trip-id="35KH1"
Code example:- https://jsfiddle.net/bhn5gftc/1/
I assume the rows are created dinamically. If this is true, then you shoud add a data attribute to the button containing the tripid:
<tr>
<td>35KH1</td>
<td><a href='#' class='deleterow' data-tripid='35KH1'>Delete Row</a></td>
</tr>
Now you can disable the button based on the 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);
}
}
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With