javascript - 如何根据javascript中的“值”或“文本”列为表格行着色？

Question

我的列名称为“状态”。如果状态为“通过”，我需要以绿色显示该行。如果“失败”则为红色。如何在javascript中做到这一点？

for (i=0; i < rows.length; i++) {
    var value = rows[i].getElementsByTagName("td")[0].firstChild.nodeValue;
    if (value == 'Pass') {
        rows[i].style.backgroundColor = "red";
    }
}

我试过了，但浏览器不支持。请帮忙。谢谢。

Answer 1

for (i=0; i < rows.length; i++) {
    var value = document.getElementsByTagName("td")[i].firstChild.nodeValue;
    if (value == 'Pass') {
        document.getElementsByTagName("td")[i].style.backgroundColor = "green";
    }
else{ document.getElementsByTagName("td")[i].style.backgroundColor = "red";}
}

试试这段代码（虽然我还没试过，这就是你需要的想法）

Answer 2

使用 jQuery，您可以尝试：

function CheckStatus(id) {
    var rows = $('#'+id).find("tr")
    $(rows).each(function(){
        var value =  $(this).find('td:first').text();
        if (value == 'Pass') {
            $(this).css('background', 'red');
        }
    });
}

Answer 3

我会使用类名而不是设置样式，但试试这个：

for (i=0; i < rows.length; i++) { 
   var value =  = rows[i].cells[0].firstChild.nodeValue;
   if (value == 'Pass') {
        rows[i].className = "red";
    } 
}

Answer 4

样式只能在 HTML 元素上实现，例如文本框、选择、文本等。在您的情况下，您尝试设置“行”值的样式，这是不正确的。您需要选择 HTML 元素，然后对其进行样式设置。

这样的事情可能会有所帮助：

for (i=0; i < rows.length; i++) {
    var value = rows[i].getElementsByTagName("td")[0].firstChild.nodeValue;
    if (value == 'Pass') {
        rows[i].getElementsByTagName("td")[0].firstChild.style.backgroundColor = "red";
    }
}

Answer 5

you can try using the Jquery

   $(document).ready(function () { 
            $("#testResults tr").each(function () { 
                var row = $(this).find("td:nth-child(2)").text(); 
                if (row == 'Pass') { 
                    $(this).css('background-color', '#F00'); 
                } else { 
                    $(this).css({ 'background-color': '#0G0',}); 
                } 
            }); 
        });