Conditional formatting for dynamically created table with JavaScript

Question

My code reads records from a database and display the records in a dynamically created table. It works fine. But the conditional formatting does not work as intended. For example, I want, if the cell value is "hello", the cell background becomes green. But only the first cell becomes green and cell value is not "hello". What would be the problem?

function dynamicTable() {
  var tableRef = document.getElementById("id_table");
  tableRef.insertRow().innerHTML = "<td id='id_word'>" + word + "</td>" + "<td id='id_count'>" + count + "</td>";

  if (word == “hello“) {
    document.getElementById("id_word").style.backgroundColor = "green";
  }
}

Please edit your question, and the snippet inside (there is a link below the snippet) to add the HTML on which the code runs. Please also include the value of word and count so that the code does not produce errors. Note that the value of word must have been "hello" when the code ran, and that only the first cell would become green, because IDs must be unique to the document, otherwise only the first is selected by getElementById. — Heretic Monkey
– Heretic Monkey, Commented Feb 11, 2021 at 16:15

TomBonynge · Accepted Answer · 2021-02-11 16:28:05Z

In your current implementation, your code will only work for a word that equals "hello", when that is the first word. document.getElementbyID will return the first element of that id that it finds.

Consider this:

function dynamicTable(word, count) {
    var tableRef = document.getElementById("id_table");
    tableRef.insertRow().innerHTML = "<td id='id_word'>" + word + "</td>" + "<td id='id_count'>" + count + "</td>";

    if (word == "hello") {
        document.getElementById("id_word").style.backgroundColor = "green";
    }
}

let words = ["hello", "goodbye", "blah", "blah", "hello", "hello", "something"];

words.forEach((word, i) => {
    dynamicTable(word, i);
});

The first cell with word in it will have a green background, but no other cells will.

Perhaps you could create the td separately, give it a style conditionally and then add it to the table afterwards, something like this:

function dynamicTable(word, count) {
    var tableRef = document.getElementById("id_table");
    const cell_word = document.createElement("td");
    cell_word.id = "id_word";
    cell_word.innerText = word;
    if (word === "hello") {
        cell_word.style.backgroundColor = "green";
    }
    const cell_count = document.createElement("td");
    cell_count.id = "id_count";
    cell_count.innerText = count;
    tableRef.insertRow().append(cell_word, cell_count);
}

let words = ["hello", "goodbye", "blah", "blah", "hello", "hello", "something"];

words.forEach((word, i) => {
    dynamicTable(word, i);
});

Collectives™ on Stack Overflow

Conditional formatting for dynamically created table with JavaScript

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related