#1
  1. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Jan 2016
    Posts
    16
    Rep Power
    0

    Apply CSS across all rows


    Hi,

    I have come across the following code which works great! (Thanks to Stofke)

    Code:
    $(function() {
        $('tr > td:odd').each(function(index) {
            var scale = [['vPoor', 10], ['poor', 50], ['avg', 250], ['good', 1250], ['vGood', 6250]];
            var score = $(this).text();
            for (var i = 0; i < scale.length; i++) {
                if (score <= scale[i][1]) {
                    $(this).addClass(scale[i][0]);
                }
            }
        });
    });

    Full Fiddle here


    I was just wondering how I would make this span the entire row?

    I have tried setting the row class but this doesn't work. Any help would be great.
  2. #2
  3. Lord of the Dance
    Devshed Specialist (4000 - 4499 posts)

    Join Date
    Oct 2003
    Posts
    4,118
    Rep Power
    2010
    Try to replace:
    Code:
    $(this).addClass(scale[i][0]);
    with this:
    Code:
    $(this).closest('tr').addClass(scale[i][0]);
    Example: colored rating scale - JSFiddle

    Comments on this post

    • jongee agrees
  4. #3
  5. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Jan 2016
    Posts
    16
    Rep Power
    0

    Thanks


    Thank you, that works a treat!

    I came across an alternative solution that mentioned the
    Code:
    .closest()
    but I couldn't get it to work in the code I had.

IMN logo majestic logo threadwatch logo seochat tools logo