Question

I have a condition that changes the background color of the table rows based on comparing values. I want to integrate another condition that compares two cells and returns a background color on only those cells..

I already have a loop running on the table

            for (i = 0; i < rows.length; i++) {
            cells = rows[i].getElementsByTagName('td');

This is what i have but its applying the color results to the entire column rather than each cell..

         if (cells[10].innertext !== cells[11].innerText)
                cells[10].style.backgroundColor = "red";
                cells[11].style.backgroundColor = "red";

         else 
            (cells[10].innertext == cells[11].innerText)
                cells[10].style.backgroundColor = "green";
                cells[11].style.backgroundColor = "green";

thanks for the help!

Answer 1

You have a capitalization issue. The first innertext should be innerText. And multiple statements must be put in a block to group them for a condition.

Also, to put a condition after else, it needs to be else if

        //-------------v
     if (cells[10].innertext !== cells[11].innerText) {
            cells[10].style.backgroundColor = "red";
            cells[11].style.backgroundColor = "red";
        //-------------v
     } else if (cells[10].innertext == cells[11].innerText) {
            cells[10].style.backgroundColor = "green";
            cells[11].style.backgroundColor = "green";
     }

Although logically the second condition isn’t needed, so you could change it to:

     } else {

---

Additionally, .textContent is the standards version of getting text from an element. If you want wider browser support, you should do something like:

var text1 = cells[10].textContent || cells[10].innerText
var text2 = cells[11].textContent || cells[11].innerText

…and then use the variables for the comparison.

---

Lastly, there’s no need to be so verbose with:

cells = rows[i].getElementsByTagName('td');

You can just use this instead:

rows[i].cells