Apply class to parent row, if child cell contains a specific value

1 Views

Problem

I want to hide a row if a value appears in any of its child cells.

Desired Effect

  • Apply class to row, if one of its child cells contains a specific value
  • Bonus Challenge: Hide column containing the value, i.e. “admin-hide”

Example Code

$('tr').each(function(){
if($('td:contains("non-member")', this).length{       
$(this).addClass('disabled');
}
});

Why?

Invaluable for tables containing information that needs to be:

Read More
  • toggled on/off without losing the back-end data, i.e. member roster,
    with lapsed member rows having display: none;
  • highlighting particular rows, i.e. premium sponsors

Difficulties I’ve Faced

Hiding the column is problematic. If necessary, I can stick to just have hiding rows with child elements containing a string.

Tech I’ve Working w/

  • WordPress 3.5.1
  • Jquery 1.10.1
  • Tablepress Pluging (which uses DataTables plugin for Jquery)

Attempt #1

This is what I have in the page editor in WordPress: 

[table id=3 /]
<script>jQuery(function($) {
$('#tableID tr').filter(function() {
$('td', this).each(function() {
if ($(this).text().indexOf('admin-hide') != -1)
$('#tableID tr td:eq('+ $(this).index() +')').hide();
});

return $(this).text().indexOf('non-member') != -1;
}).addClass('disabled');
});</script>
<style>
.disabled {display: none;}
</style>

Attempt #2 – @adeneo

This hides the row but breaks Datatables/Tablepress: 

<script> jQuery(function($) {
$('#tablepress-3 tr:contains("admin-hide")').addClass('disable-cells')
var index = $('td:contains("admin-hide")').index();
$('th,td', '#tablepress-3').filter('nth-child('+(index+1)+')').addClass('disable-cells'); });
</script>
<style>
.disable-cells {display: none;}
</style>

Attempt #3 – @SpenserJ

This hides the row, allows for Datatables. However, it doesn’t hide the column. 

<script>
jQuery(function($) {
$('#tablepress-3 td').each(function() {
if ($(this).text().indexOf('admin-hide') !== -1) {
// Hide the column without affecting the table formatting
$(this).css('visibility', 'hidden');
}
});
// Hide the entire row
$('#tablepress-3 tr:contains("admin-hide")').hide();
});
</script>
Post Views: 1

Related posts

Leave a Reply

4 comments

  1. http://codepen.io/SpenserJ/pen/GqviI

    jQuery(function($) {
  $table = $('#tablepress-3');
  $('th, td', $table).each(function() {
    if ($(this).text().indexOf('Admin Only') !== -1) {
      var index = $(this).index();
      $('th:eq(' + index + '), td:eq(' + index + ')', 'tr', $table).hide();
    }
  });
  // Hide the entire row
  $('tr:contains("Membership Expired")', $table).hide();
});

  2. jQuery(function($) {
    $('#tableID tr').filter(function() {
        $('td', this).each(function() {
            if ($(this).text().indexOf('admin-hide') != -1)
                $('#tableID tr td:eq('+ $(this).index() +')').hide();
        });

        return $(this).text().indexOf('non-member') != -1;
    }).addClass('disabled');
});

  3. Something like this?

    // tr that contains the specific word - add class to
$('#tableid tr:contains("specific word")').addClass('yourclass');
// get column index of admin-hide
var index = $('#tableid td:contains("admin-hide")').index();
// and hide all th/tr in that column    
// this is assuming when you initialized datatables you named it oTable as in var oTable = $('table').datatables()
oTable.fnSetColumnVis( index, false ); // for datatables

// or if you want to manually hide them
$('th,td', '#tableid').filter(':nth-child('+(index+1)+')').css('visibility','hidden');

    If you are using dataTables – you can set visibility like this example. Also remove the +1 because the index for the method is 0 based also – http://www.datatables.net/examples/api/show_hide.html

    using oTable

    manually hiding visibility

    using hide() works fine – i don’t know why it was messing up your sorting

    $('th,td', '#tablepress-demo').filter(':nth-child(' + (index + 1) + ')').hide()