Change Row Color based on td value using Jquery

后端 未结 2 463
再見小時候
再見小時候 2021-01-12 18:12

I have a table that gets populated from a database. I have 2 conditions that i need to apply

  1. Apply Zebra striping to the Table (Completed)
  2. Change Row
2条回答
  •  轮回少年
    2021-01-12 18:29

    To change the tr (you're using v 1.6.4 instead of latest so we need bind instead of on)

    $(document).ready(function(){
    
        $("tr.alt:even").addClass("even");
        $("tr.alt:odd").addClass("odd");
        $('td.status input').bind('change keyup', function(){
            var tr=$(this).closest('tr');
    
            if ($(this).val()=='Zero') tr.addClass('zero');       
            else tr.removeClass('zero');
    
        }).trigger('change'); // the trigger is to run this action on load
    });
    ​
    tr.odd
    {
        background-color:#fcfceb;
    }
    
    tr.even
    {
        background-color:#f0f8ff;
    }
    
    tr.odd.zero
    {
        background-color:#ff0000;
    }
    tr.even.zero
    {
        background-color:#cc0000;
    }
    

    Your HTML is a bit messed up though. You have missing quotes and is invalid.

    http://jsfiddle.net/MMEhc/158/

    EDIT: Updated version to suit the values being changed manually, not just those that are outputted (as I understood the question to be)

    http://jsfiddle.net/MMEhc/159/

    You'll see I moved the background colours out of the HTML and into the CSS to make it easier to manipulate. I also adjusted the red for even or odd rows.

提交回复
热议问题