![](/img/trans.png)
[英]How to change the background color of table row based on value in table cell?
[英]Change Row background color based on cell value
我需要根據單元格值更改表格行背景色,在此代碼中我根據單元格值更改表格單元格背景色。但是我需要根據單元格值更改整個行背景色。我該怎么做...
<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>
在正文結尾之前添加
<script> $(document).ready(function(){ $(".cell-java").parent().css("background-color","red"); }); </script>
修改您的代碼,以便根據其值將“ cell-java”類添加到td
if(value2 == "Java"){
html += '<td style="background-color: #7e57c2;" class="cell-java">'+value2+'</td>';
}
在jQuery中,您有一個parent()
方法。 看看這個演示
var allCells = $(".row > div");
$.each(allCells, function (index, child) {
if (child.textContent === "Desired value") {
$(child).parent().css("background-color", "red");
}
});
首先,我尋找.row
類的所有子代(單元),並將它們分配給變量allCells
。
接下來,我遍歷所有這些對象,並檢查它們的文本是否匹配: child.textContent === "Desired value"
。
如果匹配,則更改其父CSS: $(child).parent().css("background-color", "red");
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.