Applying a particular color to a combo

HTML & CSS
1

I have the following function which is assigning background colors to the text displayed in a table like this:

image

Here’s my function:

function setCSSColors(cellsInnerText, row, cellsIndex) {
  let x = cellsInnerText;
  if (x.includes("PET")) {
    row.cells[cellsIndex].className = "petClass";
  } else if (x.includes("VIC")) {
    row.cells[cellsIndex].className = "vicClass";
  } else if (x.includes("NED")) {
    row.cells[cellsIndex].className = "nedClass";
  } else if (x.includes("FAM")) {
    row.cells[cellsIndex].className = "famClass";
  } else if (x.includes("HEX")) {
    row.cells[cellsIndex].className = "hexClass";
  } else if (x.includes("TAMRA")) {
    row.cells[cellsIndex].className = "tamraClass";
  } else if (x.includes("Cy5")) {
    row.cells[cellsIndex].className = "cyfiveClass";
  }
  else if (x.includes("FAM/ZEN/IBFQ")) {
    row.cells[cellsIndex].className = "famComboClass";
  }
 
}

And above function is getting called from another function like this:

function colorTableCells(tableObject, pageName) {
  if (pageName === "pageOne") {
    var tables = tableObject;
    for (var j = 0; j < tables.length; j++) {
      var table = tables[j];
      for (var i = 0; i < table.rows.length; i++) {
        if (i != 0) {
          var row = table.rows[i];
          if (row.cells.length > 1) {
            var x = row.cells[1].innerText;
           setCSSColors(x, row, 1);
          }
        }
      }
    }
  } else if (pageName === "pageTwo" || pageName === "pageThree") {
    var table = tableObject;
    for (var i = 0; i < table.rows.length; i++) {
      if (i != 0) {
        var row = table.rows[i];
        if (row.cells.length > 1) {
          let x = row.cells[2].innerText;
          setCSSColors(x, row, 2);
        }
      }
    }
  }
}

And here are my CSS colors defined:

.

famClass {
  background: lightblue;
}
.famComboClass {
	background: #034694;
  }

.petClass {
  background: red;
}

.nedClass {
  background: yellow;
}

.vicClass {
  background: lightgreen;
}

.hexClass {
  background: #40ff00;
}

.tamraClass {
  background: orange;
}

.cyfiveClass {
  background: pink;
}

I’m trying to apply a different color to this combo FAM/ZEN/IBFQ using famComboClass CSS but it’s still adding famClass with light blue color. Any idea how can I apply a specific color to the above combo? famClass seems to be taking precedence over famClassCombo.

2

that’s because

  } else if (x.includes("FAM")) {

and famClass … famClassCombo.

rename the generic class to something else if you want this to work…

3

I’d ditch the idea at this point and instead use if all the way down, ADDING classes to the classlist rather than setting classname.
Also, assuming you use / for every class, you can make the javascript much reducable if you’re flexible on the class names:

Javascript:

function setCSSColors(cellsInnerText, row, cellsIndex) {
row.cells[cellsIndex].classList.add(...cellsInnerText.split("/"))
}

CSS:

.PET {
  background-color: ...
}
.VIC {
 background-color: ...
}
.PET.VIC {
background-color: ...  //Only applies if BOTH are present...
}

4

I changed the class name like this:

.comboClass {
	background: #034694;
  }

and the else if like this:

 else if (x.includes("FAM/ZEN/IBFQ")) {
    row.cells[cellsIndex].className = "comboClass";
  }

But still it didn’t work.

Btw, I’ve updated my post with some more info about colorTableCells function.

5

If you chain them all together with elseif, it will execute only the first one it comes across that is true. (Hint: } else if (x.includes("FAM")) { is true…)

6

I believe the above approach might not be applicable to table? I’ve updated my post to include how the function is getting called inside colorTableCells function.

7

Assuming that row.cells[cellsIndex] is pointing at an element, it should be applicable. I can’t tell from your code what tableObject is, but i’m assuming its a standard table element.

8

Yes, it’s a standard table element. the reason I’ve two if statement is because for pageOne, I am getting the tableObject like this in my pageOne code which used getElementsByName:

var tables = document.getElementsByName("myTableInPageOne");
let pageName = "pageOne";
colorTableCells(tables,pageName)

whereas, in case of other two pages pageTwo and pageThree

I have it like this (using getElementsById) :

var tables = document.getElementsById("myTableInPageTwo");
let pageName = "pageTwo";
colorTableCells(tables,pageName)

Similarly for pageThree

Wouldn’t your approach require me to convert all table to divs?

9

Works for me.

10

And using getElementsByName and getElementsById instead of getElementsByTagName shouldn’t create any issues, right? As I believe I have multiple tables in pageOne and other pages and hence just getElementsByTagName might not be the best choice for me.

colorTableCells(document.getElementsByTagName("table"), "pageOne");

I tried colorTableCells(document.getElementsById("target"), "pageOne"); and it stopped working.

11

your function colorTableCells is expecting the first parameter to be an array. getElementById returns a single value (hence Element instead of Elements, like the other functions use). If you want to pass a single value, you’d have to change that function.

PS: getElementsById isnt a function. Which is probably why it doesnt work. An ID is supposed to be unique.

12

So since I’ve tables with name and id in different pages, I would end up using getElementsByName and getElementsById instead of getElementsByTagName. Is that what you were referring to? Thanks!