How to achieve Javascript array index comparison?

Question

I have a table that is styled based on cell content. Cell contents are limited to specific data so I created an array. I can style the cell if I reference an index of the array:

var greencell = ["item1", "item2", etc]
var cells = document.getElementById("mytable").getElementsByTagName("td");
for (var i = 0; i < cells.length; i++) {
  if (cells[i].innerHTML == greencell[0]) {
    cells[i].style.backgroundColor = "#80ff80";
  }
}

However, I need to access the entire array. When I set comparison == greencell the styling is not applied. What am I missing? Am I even approaching this correctly? Loop through the array similar to the cells loop and set comparison on the loop result? My mind is mush at the moment

Thanks!

Bálint · Accepted Answer · 2017-07-29 22:12:05Z

1

You need to loop through the array:

var greencell = ["item1", "item2", etc]

var cells = document.getElementById("mytable").getElementsByTagName("td");
var j = 0; 
for (var i = 0; i < cells.length; i++) {
    for (j = 0; j < greencell.length; j++) {
        if (cells[i].innerHTML == greencell[j]) {
            cells[i].style.backgroundColor = "#80ff80";
        }
    }
}

If you want a different color for each item, you can use an array:

var colors = ["#ff0000", "#00ff00", "#0000ff"];
var cells = document.getElementById("mytable").getElementsByTagName("td");
var j = 0; // You shouldn't redeclare the variable each iteration
for (var i = 0; i < cells.length; i++) {
    for (j = 0; j < greencell.length; j++) {
        if (cells[i].innerHTML == greencell[j]) {
            cells[i].style.backgroundColor = colors[j];
        }
    }
}

edited Jul 29, 2017 at 22:12

answered Jul 29, 2017 at 21:53

Bálint

4,0692 gold badges19 silver badges28 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Ry- Over a year ago

“Redeclare the variable each iteration” doesn’t make sense. var is a parse-time thing and an iteration is a run-time thing.

gr3yb3ard Over a year ago

Thanks @balint I was going that direction but didn't get the syntax correct.

Bálint Over a year ago

@Ryan Right, sorry, I'm still thinking in other languages.

Ry- · Accepted Answer · 2017-07-29 21:55:31Z

1

You can use indexOf to check if the innerHTML matches any element of greencell:

if (greencell.indexOf(cells[i].innerHTML) !== -1) {
    cells[i].style.backgroundColor = "#80ff80";
}

answered Jul 29, 2017 at 21:55

community wiki

Ry-

1 Comment

gr3yb3ard Over a year ago

Thanks Ryan, this is nice! I find this to be the most challenging aspect of coding, so many ways to reach a solution.

Martin Wheeler · Accepted Answer · 2017-07-29 22:20:44Z

For a more ES6 oriented solution you could iterate over the HTMLCollection as an Array and then decide your style base on the text of the cell.

HTML:

<table id="mytable">
  <tr>
    <td>item2</td>
    <td>wrong</td>
  </tr>
  <tr>
    <td>red</td>
    <td>item1</td>
  </tr>
</table>

JS:

var greencell = ["item1", "item2"];
var redcell = ["red", "wrong"];

var cells = document.getElementById("mytable").getElementsByTagName("td");

Array.from(cells).forEach(function(cell) {
  cell.style.cssText = getStyles(cell.innerHTML)
})

function getStyles(value) {
  if (greencell.indexOf(value) > -1) {
    return 'background-color: green; color: white';
  }
  if (redcell.indexOf(value) > -1) {
    return 'background-color: red; color: white';
  }
}

JSFiddle

Collectives™ on Stack Overflow

How to achieve Javascript array index comparison?

3 Answers 3

3 Comments

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

3 Comments

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related