Filter table on specific column
Question
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']();
});
}
});
});
5 answers
solution1
2 ACCPTED 2018-03-01 10:28:30
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
solution2
1 2018-03-01 10:21:31
Consider selecting the td elements using the nth-child(n) css selctor.
eg
td:nth-child(2)
or
$("#myTable tbody tr td:nth-child(2)")
solution3
1 2018-03-01 10:26:29
you can try $("#myTable tbody tr td:nth-child(2)"). this should work
solution4
1 2018-03-01 10:29:20
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();
}
});
}
});
});
solution5
1 2018-03-01 10:45:44
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>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.