WordPress.org

Ready to get started?Download WordPress

Forums

[resolved] [Plugin: WP-Table Reloaded] Custom CSS for rows that contain specific word (11 posts)

  1. pleasureinstitute
    Member
    Posted 2 years ago #

    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.

  2. TobiasBg
    Member
    Posted 2 years ago #

    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

  3. pedrogas_g
    Member
    Posted 2 years ago #

    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;
    }

  4. TobiasBg
    Member
    Posted 2 years ago #

    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

  5. pedrogas_g
    Member
    Posted 2 years ago #

    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')
    })

  6. pedrogas_g
    Member
    Posted 2 years ago #

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

  7. TobiasBg
    Member
    Posted 2 years ago #

    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

  8. pedrogas_g
    Member
    Posted 2 years ago #

    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

  9. TobiasBg
    Member
    Posted 2 years ago #

    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

  10. pleasureinstitute
    Member
    Posted 2 years ago #

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

  11. TobiasBg
    Member
    Posted 2 years ago #

    Hi,

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

    Best wishes,
    Tobias

Topic Closed

This topic has been closed to new replies.

About this Topic