CODEWITHSUNDEEP
jqueryhtmlhtml-table
Sahil
Sahil

Reputation: 1413

Delete all rows in a table except one while retaining the table head

I have a sidebar that has a list of certian attributes, which are type and display_label once either of those two attributes are clicked I want the table to be empty except for the row which corresponds to the aforementioned attributes.

I am able to get the ID of the table row which should retain, I want all the other entries gone while keeping the table header, the current solution is deleting all table rows including the header or is keeping the row that is not related. 

<div class="row">
  <div class="pull-left col-4">
    <ol>
        <li><a href="#" onclick="show_type_specific(1)">Type</a></li>
        <li><a href="#" onclick="show_type_specific(2)">Type 2</a></li>
    </ol>
    <ol>
        <li><a href="#" onclick="show_display_specific(1)">Display label</a></li>
        <li><a href="#" onclick="show_display_specific(2)">Display label 2</a></li>
    </ol>
  </div>
  <table class="table">
    <tr>
      <th>ID</th>
      <th>Name</th>
    </tr>
    <tr>
        <td>1</td>
        <td>something</td>
    </tr>
    <tr>
        <td>2</td>
        <td>something else</td>
    </tr>
  </table>
</div>

<script>
    function show_type_specific(id){
        $(".table").find(`tr:eq(${id})`).remove();    
     }

    function show_display_specific(id){
        $(".table").find(`tr:eq(${id})`).remove();    
      }

</script>

Upvotes: 0

Views: 212

Answers (3)

Sahil
Sahil

Reputation: 1413

The question was already answered but I ended up using this as my solution

<script type="text/javascript">
    function show_display_specific(){
        var table = $(".table tbody");

        table.find('tr').each(function (i) {
            var $tds = $(this).find('td'),
                input_val = $tds.eq(0).text(),
                ouput_val = $tds.eq(1).text(),
                display_label = $tds.eq(2).text();
            if (display_label == idToKeep){
                // $tds.attr("hidden", false);
                console.log("this works can you belive it ", display_label);
            }else{
                // $tds.attr("hidden", true);
            }
        });
        $("#form-div").attr("hidden", false);
    }
</script>

Upvotes: 0

Bryan Dellinger
Bryan Dellinger

Reputation: 5294

how about using data attributes? run the snippet below.

$('ol>li>a').click( (e) =>  $('.table tr').filter(`[data-type=${$(e.target).data('type')}]`).remove());
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">


<div class="row">
  <div class="col-4">
    <ol>
        <li><a href="#" data-type="1">Type</a></li>
        <li><a href="#" data-type="2">Type 2</a></li>
    </ol>
    <ol>
        <li><a href="#" data-type="1">Display label</a></li>
        <li><a href="#" data-type="2">Display label 2</a></li>
    </ol>
  </div>
  <div>
  <table class="table">
    <tr>
      <th>ID</th>
      <th>Name</th>
    </tr>
    <tr data-type="1">
        <td>1</td>
        <td>something</td>
    </tr>
    <tr data-type="2">
        <td>2</td>
        <td>something else</td>
    </tr>
  </table>
    </div>
</div>

Upvotes: 0

T.J. Crowder
T.J. Crowder

Reputation: 1074208

It would be easier if the table were put in sections correctly in the first place, using thead and tbody:

<table class="table">
  <thead>
    <tr>
      <th>ID</th>
      <th>Name</th>
    </tr>
  </thead>
  <tbody>
    <tr>
        <td>1</td>
        <td>something</td>
    </tr>
    <tr>
        <td>2</td>
        <td>something else</td>
    </tr>
  </tbody>
</table>

Then it would be:

$("table.table > tbody > tr").remove();

Or if you need to keep a data row that's identified by the text in the first column:

$("table.table > tbody > tr").filter(function() {
    return $(this.firstElementChild).text().trim() != idToKeep;
}).remove();

Live Example:

setTimeout(function() {
    var idToKeep = 2;
    $("table.table > tbody > tr").filter(function() {
        return $(this.firstElementChild).text().trim() != idToKeep;
    }).remove();
}, 800);
<table class="table">
  <thead>
    <tr>
      <th>ID</th>
      <th>Name</th>
    </tr>
  </thead>
  <tbody>
    <tr>
        <td>1</td>
        <td>something</td>
    </tr>
    <tr>
        <td>2</td>
        <td>something else</td>
    </tr>
  </tbody>
</table>

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

As it is, though, you'll have to exempt the first row:

$("table.table tr:not(:first-child)").remove();

Or if you need to keep a data row that's identified by the text in the first column and exempt the first row:

$("table.table tr").filter(function(index) {
    return index !== 0 && $(this.firstElementChild).text().trim() != idToKeep;
}).remove();


setTimeout(function() {
    var idToKeep = 2;
    $("table.table tr").filter(function(index) {
        return index !== 0 && $(this.firstElementChild).text().trim() != idToKeep;
    }).remove();
}, 800);
<table class="table">
  <tr>
    <th>ID</th>
    <th>Name</th>
  </tr>
  <tr>
      <td>1</td>
      <td>something</td>
  </tr>
  <tr>
      <td>2</td>
      <td>something else</td>
  </tr>
</table>

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

You may be wondering why I used a descendant combinator (a space) rather than a child combinator (>) in that one, when I used a child combinator in the previous one. The reason is that the browser will automatically wrap your rows in a tbody element. So this would work as well:

$("table.table > tbody > tr:not(:first-child)").remove();

Or if you need to keep a data row that's identified by the text in the first column and exempt the first row:

$("table.table > tbody > tr").filter(function(index) {
    return index !== 0 && $(this.firstElementChild).text().trim() != idToKeep;
}).remove();


setTimeout(function() {
    var idToKeep = 2;
    $("table.table > tbody > tr").filter(function(index) {
        return index !== 0 && $(this.firstElementChild).text().trim() != idToKeep;
    }).remove();
}, 800);
<table class="table">
  <tr>
    <th>ID</th>
    <th>Name</th>
  </tr>
  <tr>
      <td>1</td>
      <td>something</td>
  </tr>
  <tr>
      <td>2</td>
      <td>something else</td>
  </tr>
</table>

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

Upvotes: 3

Related Questions