Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

How to stop user from removing all tr in table based on jquery count of each ID?

Tags:

jquery

php

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();
});
like image 656
ThaiThai Avatar asked May 30 '26 22:05

ThaiThai


2 Answers

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/

like image 112
Anant Kumar Singh Avatar answered Jun 02 '26 10:06

Anant Kumar Singh


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);
    }
}
like image 36
Danilo Körber Avatar answered Jun 02 '26 10:06

Danilo Körber



Donate For Us

If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!