根据单元格值更改行背景颜色

Question

我需要根据单元格值更改 table 行背景颜色，在此代码中我根据单元格更改 table 单元格背景颜色 value.but 我需要更改整个行背景基于单元格的颜色 value.how 我可以这样做吗...

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

Answer 1

在 jQuery 中你有一个 parent() 方法。看看this Demo

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

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

});

首先，我查找 .row class 的所有子项（单元格）并将它们分配给变量 allCells.

接下来我遍历所有这些并检查它们的文本是否匹配：child.textContent === "Desired value".

如果匹配，则我更改其父级 css：$(child).parent().css("background-color", "red");

Answer 2

在正文末尾添加这个

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

将您的代码修改为此，以便根据它的值将 class "cell-java" 添加到 td

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

根据单元格值更改行背景颜色

Change Row background color based on cell value

html

css

jquery

tablerow