If it Says "OK" in the Table, Paint it Green

Question

I created a web page with the help of "Google Script". I pull the data to the web page with the following code. If the data coming to the column "col14" is equal to "OK", I want the current row to be colored green. How can I do that?

google.script.run.withSuccessHandler(generateTable).getTableData(username);

function generateTable(dataArray){

      var tbody = document.getElementById("table-body");
      dataArray.forEach(function(r){  

      var row = document.createElement("tr");
      var col1 = document.createElement("td");
      var col2 = document.createElement("td");
      var col3 = document.createElement("td");
      var col4 = document.createElement("td");
      var col5 = document.createElement("td");
      var col6 = document.createElement("td");
      var col7 = document.createElement("td");
      var col8 = document.createElement("td");
      var col9 = document.createElement("td");
      var col10 = document.createElement("td");
      var col11 = document.createElement("td");
      var col12 = document.createElement("td");
      var col13 = document.createElement("td");
      var col14 = document.createElement("td");
      col1.textContent = r[0];
      col2.textContent = r[1];
      col3.textContent = r[2];
      col4.textContent = r[3];
      col5.textContent = r[4];
      col6.textContent = r[5];
      col7.textContent = r[6];
      col8.textContent = r[7];
      col9.textContent = r[8];
      col10.textContent = r[9];
      col11.textContent = r[10];
      col12.textContent = r[11];
      col13.textContent = r[12];
      col14.textContent = r[13];
      row.appendChild(col1); 
      row.appendChild(col2);   
      row.appendChild(col3);
      row.appendChild(col4); 
      row.appendChild(col5);   
      row.appendChild(col6);
      row.appendChild(col7);
      row.appendChild(col8);
      row.appendChild(col9);
      row.appendChild(col10);
      row.appendChild(col11);
      row.appendChild(col12);
      row.appendChild(col13);
      row.appendChild(col14);
      tbody.appendChild(row);
  
});
}

user_7108653 · Answer

I believe your goal as follows.

You want to set the background color of the row to the green color when the value of r[13] is OK.

In your situation, for example, how about the following modification?

From:

row.appendChild(col14);
tbody.appendChild(row);

To:

row.appendChild(col14);

if (r[13] == "OK") row.style.backgroundColor = "green"; // Added

tbody.appendChild(row);

or, if (r[13].toUpperCase() == "OK") row.style.backgroundColor = "green";.

user_1300518 · Answer

Adding to @Tanaike's answer, you should read a bit about loops in js.

Your code would make much more sense if copy-pasting lines is replaced with loop, like this

  google.script.run.withSuccessHandler(generateTable).getTableData(username);

  function generateTable(dataArray){

        var tbody = document.getElementById("table-body");
        dataArray.forEach(function(r){  

        var row = document.createElement("tr");
        for(i=0; i<14; i++) {
              var col = document.createElement("td");
              col.textContent = r[i];
              row.appendChild(col); 
        }
        if(r[13] == "OK")
              row.style.color = "green";
        tbody.appendChild(row);
  }

If it Says "OK" in the Table, Paint it Green

2 Answers

From:

To: