CODEWITHSUNDEEP
javascriptjquery
Mike Pala
Mike Pala

Reputation: 806

Filter table on specific column

I have a working example over here:

https://plnkr.co/edit/g6geH12xCI8EirNvghsW?p=preview

you can see that if you select "Mark" in the select box it will filter my table and show both:

John Mark

and

Mark Poet

and I only want it to filter on the 2nd column... so show Mark Poet ONLY.

I appreciate any helpful tips.

$(document).ready(function ($) {


    $('#mySelector').change(function () {
        var selection = $(this).val();
        $('table')[selection ? 'show' : 'hide']();

        if (selection) {
            $.each($('#myTable tbody tr'), function (index, item) {
                $(item)[$(item).is(':contains(' + selection + ')') ? 'show' : 'hide']();
            });
        }

    });
});

Upvotes: 0

Views: 1333

Answers (5)

Fr0zenFyr
Fr0zenFyr

Reputation: 1929

Just need to target second td with td:eq(1)... index starts from 0.

Also, the . notation is more readable, so I'd use .show() and .hide().

Further, I didn't get why you would show or hide the table itself, but if that's unintentional, just show all the rows before filtering instead. That will display all rows when "Please Select" is selected. At present after making a selection and then selecting "please select" will hide the table completely. So you can use code like:

https://plnkr.co/edit/M5dyYwiL4ZO9qwnZMMKc?p=preview

$(document).ready(function($) {
  $('#mySelector').change(function() {
    var selection = $(this).val(),
      row = $('#myTable tbody tr');
    row.show(); // show all rows to ensure no row remains hidden

    if (selection) {
      // hide the row that doesn't contain selected val td:eq(1)
      row.filter(function(index, item) {
        return $(item).find('td:eq(1)').text().indexOf(selection) === -1;
      }).hide();
    }
  });
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<body>
  <select id='mySelector' class="styled-select slate">
       <option value="">Please Select</option>
       <option value='John'>John</option>
       <option value='Mark'>Mark</option>
       <option value='Ace'>Ace</option>
    </select>
  <br><br><br>
  <table id='myTable'>
    <thead>
      <tr>
        <th>ids</th>
        <th>name</th>
        <th>address</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>1,2</td>
        <td>John</td>
        <td>Mark</td>
      </tr>
      <tr>
        <td>3</td>
        <td>Mark</td>
        <td>Poet</td>
      </tr>
      <tr>
        <td>2,3</td>
        <td>Ace</td>
        <td>Ventura</td>
      </tr>
    </tbody>
  </table>
</body>

Upvotes: 1

nh_
nh_

Reputation: 299

Assuming that you always want to filter on the 2nd column, this would work:

$(document).ready(function($) {
  $('#mySelector').change(function() {
    var selection = $(this).val();
    $('table')[selection ? 'show' : 'hide']();

    if (selection) {
      $('#myTable tbody tr').each(function() {
        var $name = $(this).find("td").first().next();
        var $row = $name.parent();
        if ($name.text() != selection) {
          $row.hide();
        } else {
          $row.show();
        }
      });
    }
  });
});

Upvotes: 1

Harry Mumford-Turner
Harry Mumford-Turner

Reputation: 924

Consider selecting the td elements using the nth-child(n) css selctor.

e.g.

td:nth-child(2)

or

$("#myTable tbody tr td:nth-child(2)")

Upvotes: 1

Kaddath
Kaddath

Reputation: 6151

You have to reduce your selection to the desired td, for example like that

$(item)[$(item).find('td:nth-child(2)').is(':contains('+ selection +')')? 'show' : 'hide']();

NOTE: reducing the selection at the each level won't work, because you wouldn't hide the wole row but each td individually

working example: https://plnkr.co/edit/yabW9OgQEE5Fb3efF8Q0?p=preview

Upvotes: 2

Vamsi M
Vamsi M

Reputation: 38

you can try $("#myTable tbody tr td:nth-child(2)"). this should work

Upvotes: 1

Related Questions