简体   繁体   中英

Change Row background color based on cell value

I need to change table row background color based on cell value,in this code i change table cell background color based on cell value.but i need to change entire row background color based on cell value.how can i do this...

<script>
    $(document).ready(function () {
    $('body').append('<div class="container" ><h4 style="color:#069">Batch-4 2nd Semester Timetable</h4></div><br>');

    var html = '<div class="container" ><table class="table table-striped"></div>';
    html += '<tr>';
    var flag = 0;

    var data2   =   <?php echo $valMS; ?>;
    $.each(data2[0], function(index, value){
        html += '<th>'+index+'</th>';
    });
    html += '</tr>';

     $.each(data2, function(index, value){

        html += '<tr>';

        $.each(value, function(index2, value2){

            if(value2 == "Java"){
                html += '<td style="background-color: #7e57c2;">'+value2+'</td>';
            }
            else{
                html += '<td>'+value2+'</td>';
            }
        });


        html += '</tr>';
     });


     html += '</table>';
     $('body').append(html);
     console.log(html);
});
    </script>

Add this before the end of body

 <script> $(document).ready(function(){ $(".cell-java").parent().css("background-color","red"); }); </script> 

modify your code to this so it will be add class "cell-java" to the td depending on it's value

  if(value2 == "Java"){
                    html += '<td style="background-color: #7e57c2;" class="cell-java">'+value2+'</td>';
                }

In jQuery you have a parent() method. Take a look at this Demo

var allCells = $(".row > div");

$.each(allCells, function (index, child) {
    if (child.textContent === "Desired value") {
        $(child).parent().css("background-color", "red");
    }

});

First I look for all the children (cells) of a .row class and assign them to the variable allCells .

Next I iterate over all of them and check, if their text is matching: child.textContent === "Desired value" .

If it is matching, then I change its parent css: $(child).parent().css("background-color", "red");

The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM