How to color table rows on the basis of column 'value' or 'text' in javascript?

Question

I am having column name as 'Status'. If status is 'Pass' i need to show that row in green color. If 'fail' then red. How to do it in 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";
    }
}

I tried this but it is not supported by browser. Kindly help. Thanks.

i tried $('.status:contains("Pass")').css('color', 'green'); $('.status:contains("Fail")').css('color', 'red'); this — Sapna Gawande, Dec 14 '12 at 11:27
Where does `rows` come from? What particular part isn't supported by your browser, and which browser are you using? — Anthony Grist, Dec 14 '12 at 11:27
can you try adding the custom css class to the row, by defining a css class — Srinivas B, Dec 14 '12 at 11:27
or else you can try this... $(this).css('background-color', '#CC3333'); — Srinivas B, Dec 14 '12 at 11:30
function CheckStatus(id) { var table = document.getElementById(id); var rows = table.getElementsByTagName("tr"); — Sapna Gawande, Dec 14 '12 at 11:31
Have a look at this this may help: http://stackoverflow.com/questions/3065342/how-do-i-iterate-through-table-rows-and-cells-in-javascript — matpol, Dec 14 '12 at 11:37

score 0 · Answer 1 · answered Dec 14 '12 at 11:30

0

Using jQuery you can try:

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');
        }
    });
}

answered Dec 14 '12 at 11:30

Akhil Sekharan

11,581
6
34
54

jquery? where in the question? – matpol Dec 14 '12 at 11:38
OP already tried. $('.status:contains("Pass")').css('color', 'green'); $('.status:contains("Fail")').css('color', 'red'); – Akhil Sekharan Dec 14 '12 at 11:39
on principle as I say jquery is not the anser to everything – matpol Dec 14 '12 at 11:43

user1844626 · Answer 2 · 2012-12-14T11:45:35.997

0

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";}
}

try this code (I didn't try yet though, thiss the idea what you need)

edited Dec 14 '12 at 11:45

answered Dec 14 '12 at 11:38

user1844626

1,728
7
23
35

score 0 · Answer 3 · answered Dec 14 '12 at 11:42

0

I would use class names instead of setting the style but try this:

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

answered Dec 14 '12 at 11:42

matpol

3,014
1
12
17

score 0 · Answer 4 · answered Jul 05 '17 at 09:21

Styles can only be implemented on HTML elements e.g. text box, select, text etc. In your case you are trying to style a value of 'rows', which is not correct. You need to select the HTML element and then style it.

Something like this might help:

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";
    }
}

score -1 · Answer 5 · answered Dec 14 '12 at 11:34

-1

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',}); 
                } 
            }); 
        });

answered Dec 14 '12 at 11:34

Srinivas B

1,721
3
14
33

jquery is the answer to everything - although not in this case! – matpol Dec 14 '12 at 11:35

How to color table rows on the basis of column 'value' or 'text' in javascript?

5 Answers5