Jquery Filtering Table results on data attribute

Question

I have a simple table that shows date in columns. Each <td> has a data attribute data-port I'd like to filter the results shown in the table, based on an option selected from a drop downlist.

The HTML is :

<select id='filter'>
<option></option>
<option value='fd18'>OPTION A</option>
<option value='af13'>OPTION B</option>
</select>

<table id='table1'>
<tbody>
<tr>
    <td data-port="fd18"><div id="123" class="title">123</div></td>
    <td data-port="af13"><div id="456" class="title">456</div></td>
    <td data-port="0000"><div id="789" class="title">789</div></td>
    <td data-port="fd18"><div id="213" class="title">213</div></td>
</tr>

<tr>
    <td data-port="fd18"><div id="345" class="title">345</div></td>
    <td data-port="af13"><div id="946" class="title">946</div></td>
    <td data-port="0000"><div id="368" class="title">368</div></td>
    <td data-port="af13"><div id="246" class="title">246</div></td>
</tr>

<tr>
    <td data-port="af13"><div id="642" class="title">642</div></td>
    <td data-port="fd18"><div id="759" class="title">795</div></td>
    <td data-port="fd18"><div id="335" class="title">335</div></td>
    <td data-port="fd18"><div id="556" class="title">556</div></td>
</tr>
</tbody>
</table>

Using jquery I'm trying to show the td's where the data-port equals the selected option and hide the rest. How can I do this and it is it possible to dynamically update the table layout so I still end up with neat columns.

The jquery I'm using is :

$('#filter').change(function() {
    var port = $(this).val()
    console.log( port )
    $("td > [data-port!=" + port+ "]").hide();
    $("td > [data-port=" + port+ "]").show();
});

The console shows the correct value being returned, but I end up hiding all TD's on the page not just the ones which don't match

Any ideas how I can do this. Thanks

Kerim Ayturk · Accepted Answer · 2017-03-08 11:08:50Z

1

Is this what you looking for:

$('#filter').change(function() {
    var port = $(this).val()
    console.log( port )
    if ( port !== '' ) {
      $("td[data-port!=" + port+ "]").css('visibility', 'hidden');
      $("td[data-port=" + port+ "]").css('visibility', 'visible');
    } else {
      $("td").css('visibility', 'visible');
    }
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select id='filter'>
<option value=''></option>
<option value='fd18'>OPTION A</option>
<option value='af13'>OPTION B</option>
</select>

<table id='table1'>
<tbody>
<tr>
    <td data-port="fd18"><div id="123" class="title">123</div></td>
    <td data-port="af13"><div id="456" class="title">456</div></td>
    <td data-port="0000"><div id="789" class="title">789</div></td>
    <td data-port="fd18"><div id="213" class="title">213</div></td>
</tr>

<tr>
    <td data-port="fd18"><div id="345" class="title">345</div></td>
    <td data-port="af13"><div id="946" class="title">946</div></td>
    <td data-port="0000"><div id="368" class="title">368</div></td>
    <td data-port="af13"><div id="246" class="title">246</div></td>
</tr>

<tr>
    <td data-port="af13"><div id="642" class="title">642</div></td>
    <td data-port="fd18"><div id="759" class="title">795</div></td>
    <td data-port="fd18"><div id="335" class="title">335</div></td>
    <td data-port="fd18"><div id="556" class="title">556</div></td>
</tr>
</tbody>
</table>

You have the arrow sign after your TD in your jQuery code. That means, first child after TD that is having data-port attr. In your case, your TD has the data-port attr self.

edited Mar 8, 2017 at 11:08

answered Mar 8, 2017 at 10:23

Kerim Ayturk

1066 bronze badges

Sign up to request clarification or add additional context in comments.

5 Comments

MacMan Over a year ago

I get an error when I try and run that snippet. "message": "Uncaught ReferenceError: $ is not defined", "filename": "stacksnippets.net/js", "lineno": 13, "colno": 9

Kerim Ayturk Over a year ago

That is true, you need jQuery lib. Edited the snippet, you are good to go :)

MacMan Over a year ago

Thanks that helps. Is there any way to tidy the page formatting ? Selecting option A results in one entry on the second row by it's self.

Kerim Ayturk Over a year ago

Check snippet again. Is this what you mean?

MacMan Over a year ago

I was hoping to move all the cells so they appeared in order without any gaps in any rows etc. But I'm happy with how this is. Thanks

Collectives™ on Stack Overflow

Jquery Filtering Table results on data attribute

1 Answer 1

5 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

5 Comments

Your Answer

Sign up or log in

Post as a guest

Related