Support » Plugins » [Plugin: WP-Table Reloaded] Custom CSS for rows that contain specific word

  • Resolved pleasureinstitute

    (@pleasureinstitute)


    Hi! Here’s the trouble…

    I have a table with 4 columns that fits just nicely, but I want a 5th category of data to be represented by color. It’s a list of jobs: Workplace, City, Description, Due date to apply, and the 5th bit of info would be Type: Permanent, Temporary, etc.

    I want to import a CSV file that goes like Workplace, City, Description, Due date to apply, Type… but I don’t want to show Type as a column, I want it to show as a coloring of the row (ie. rows listing Permanent jobs get a red background, rows listing Temporary jobs get a green background, etc.)

    Any idea how I can color the row red when Permanent is the value in the last column?

    P.S. I COULD put code into the Type column of the CSV itself if I absolutely had to (maybe class="permanent" or something like that)… but I wouldn’t want to.

Viewing 10 replies - 1 through 10 (of 10 total)
  • Hi,

    thanks for your post.

    Unfortunately, I’m not aware of a readily usable solution for this. You will likely have to develop a custom solution, probably with JavaScript.
    As an idea, you could loop of the cells in the last column, check the content, and then add a corresponding CSS class to the entire row. Finally, you could hide the column.
    If you use jQuery, this should be possible with just a few lines of code.

    Best wishes,
    Tobias

    something like this maybe

    foreach($linesAsocArray as $line)
    {
    $tp = “<tr class=”%s” ><td>%s</td><td>%s</td><tr>”;
    echo sprintf($tp,$line[‘Type’],$line[‘Workplace’],$line[‘City’]);
    }
    and litle css
    .Permanent
    {
    backgrond:green;
    }
    .Temporary
    {
    backgrond:red;
    }

    Hi,

    thanks for the code!

    As this is PHP code though, it’s not really useful here, as this can not be integrated into WP-Table Reloaded without modifying the actual plugin files, which is not recommended. Additionally, this would break the plugin for all other tables.

    The best solution really is JavaScript here, in my opinion.

    Regards,
    Tobias

    well maybe this with jquery

    JQuery(‘#yourtable tr’).each(function(){
    if(JQuery(this).find(‘:last-child’).text() == ‘Permanent’)
    JQuery(this).addClass(‘Permanent’)
    else
    JQuery(this).addClass(‘Temporary’)
    })

    Sorry is JQuery(this).find(‘td:last-child’) and not JQuery(this).find(‘:last-child’)

    Hi,

    nice, pedrogas_g, thank you very much! That should definitelly be a good starting point for pleasureinstitute!

    Here’s my version (untested), which should also do the hiding part (for table body, head, and foot), and simplifies things, as we know that this code will only run on tables with this structure, and where this is intended:

    jQuery( '#your-table-html-id' ).find( 'tbody' ).children().each( function() {
      var $last_child = jQuery(this).children().last();
      jQuery(this).addClass( $last_child.text() );
      $last_child.remove();
    } );
    jQuery( '#your-table-html-id' ).find( 'thead, tfoot' ).children().find( 'th:last-child' ).remove();

    Best wishes,
    Tobias

    Yeah that should do it and it’s really most easy to read for anyone who is not used to jQuery
    Have nice new years eve.
    Pedro

    Hi Pedro,

    it should also be a little bit more performant. For example, using find() is usually faster in the recent versions of jQuery than using a large selector.

    A Happy New Year to you, too!

    Best wishes,
    Tobias

    Thread Starter pleasureinstitute

    (@pleasureinstitute)

    Thank you for your support guys, and have a happy new year!

    Hi,

    no problem, you are very welcome! A Happy New Year to you, too!

    Best wishes,
    Tobias

Viewing 10 replies - 1 through 10 (of 10 total)
  • The topic ‘[Plugin: WP-Table Reloaded] Custom CSS for rows that contain specific word’ is closed to new replies.