如果在表格中显示“OK”，则将其涂成绿色

Question

我在“Google Script”的帮助下创建了一个网页。我使用以下代码将数据拉到网页。如果进入“col14”列的数据等于“OK”，我希望当前行显示为绿色。我该怎么做？

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);
  
});
}

Answer 1

我相信你的目标如下。

• 当r[13] 的值为OK 时，您希望将行的背景颜色设置为绿色。

以你的情况为例，下面的修改怎么样？

发件人：

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

收件人：

row.appendChild(col14);

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

tbody.appendChild(row);

• 或if (r[13].toUpperCase() == "OK") row.style.backgroundColor = "green";。

Answer 2

除了@Tanaike 的回答，您应该阅读一些关于 js 中的循环的内容。

如果将复制粘贴行替换为循环，您的代码会更有意义，就像这样

  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);
  }