使用 javascript 条件格式化 html 表答案

【问题标题】：Conditional formatting html table with javascript使用 javascript 条件格式化 html 表
【发布时间】：2018-08-01 23:27:08
【问题描述】：

仅使用 javascript（不是 jquery 等）根据表格列中单元格值的值为 html 表格行设置背景颜色。如果“结果”列中的值等于“成功”，则行为“绿色”，如果值为“失败”，则行为“红色”。

背景： -修改生成带有表格的html的python代码，已经添加了“点击排序”功能 - 尝试了几个有条件格式化的选项，没有一个成功 - 真正的新手，所以放弃所有示例代码 - 关注代码末尾的函数resultFormatting

function sortTable(n) {
  var table, rows, switching, i, x, y, shouldSwitch, dir, switchcount = 0;
  table = document.getElementById("myTable");
  switching = true;
  dir = "asc";
  while (switching) {
    switching = false;
    rows = table.getElementsByTagName("TR");
    for (i = 1; i < (rows.length - 1); i++) {
      shouldSwitch = false;
      x = rows[i].getElementsByTagName("TD")[n];
      y = rows[i + 1].getElementsByTagName("TD")[n];
      if (dir == "asc") {
        if (x.innerHTML.toLowerCase() > y.innerHTML.toLowerCase()) {
          shouldSwitch = true;
          break;
        }
      } else if (dir == "desc") {
        if (x.innerHTML.toLowerCase() < y.innerHTML.toLowerCase()) {
          shouldSwitch = true;
          break;
        }
      }
    }
    if (shouldSwitch) {
      rows[i].parentNode.insertBefore(rows[i + 1], rows[i]);
      switching = true;
      switchcount++;
    } else {
      if (switchcount == 0 && dir == "asc") {
        dir = "desc";
        switching = true;
      }
    }
  }
}

function resultFormatting() {
  ('tr').each(function() {
    var col_val = $(this).find('td.eq(4)').text();
    if (col_val == "Success") {
      $(this).addClass('selected');
    } else {
      $(this).addClass('bad');
    }
  });
});
.selected {
  background-color: green;
}
.bad {
  background-color: red;
}

td {
  width: 200px;
  height: 60px;
}

th {
  cursor: pointer;
}

<body>
  <p style="font-size:30px">
    Total tests: 10. Failed tests: 2. Skipped tests: 0.<br>
  </p>
  <p style="font-size:30px">
    Report test time 0:00:00<br>
  </p>
  <table border="1" id="myTable">
    <thead>
      <tr>
        <th onclick="sortTable(0)">Facility</th>
        <th onclick="sortTable(1)">Test_group</th>
        <th onclick="sortTable(2)">Test_number</th>
        <th onclick="sortTable(3)">Description</th>
        <th onclick="sortTable(4)">Result</th>
        <th onclick="sortTable(5)">Execution_time</th>
        <th onclick="sortTable(6)">Information</th>
        <th onclick="sortTable(7)">Output</th>
      </tr>
    </thead>
    <tbody>

      <tr>
        <td>Room</td>
        <td>468</td>
        <td>0</td>
        <td>Horse</td>
        <td>Success</td>
        <td>0:14:39</td>
        <td>Brown</td>
        <td></td>
      </tr>
      <tr>
        <td>Den</td>
        <td>288</td>
        <td>1</td>
        <td>Mule</td>
        <td>Success</td>
        <td>0:00:21</td>
        <td>Brown</td>
        <td></td>
      </tr>
      <tr>
        <td>Den</td>
        <td>660</td>
        <td>2</td>
        <td>Horse</td>
        <td>Success</td>
        <td>0:05:47</td>
        <td>Brown</td>
        <td></td>
      </tr>
      <tr>
        <td>Patio</td>
        <td>148</td>
        <td>3</td>
        <td>Pig</td>
        <td>Fail</td>
        <td>0:14:34</td>
        <td>Red</td>
        <td></td>
      </tr>
      <tr>
        <td>Patio</td>
        <td>386</td>
        <td>4</td>
        <td>Horse</td>
        <td>Fail</td>
        <td>0:13:07</td>
        <td>Brown</td>
        <td></td>
      </tr>
      <tr>
        <td>Room</td>
        <td>238</td>
        <td>5</td>
        <td>Pig</td>
        <td>Success</td>
        <td>0:13:17</td>
        <td>Brown</td>
        <td></td>
      </tr>
      <tr>
        <td>Den</td>
        <td>988</td>
        <td>6</td>
        <td>Dog</td>
        <td>Success</td>
        <td>0:05:13</td>
        <td>Red</td>
        <td></td>
      </tr>
      <tr>
        <td>Room</td>
        <td>256</td>
        <td>7</td>
        <td>Mule</td>
        <td>Success</td>
        <td>0:05:32</td>
        <td>Purple</td>
        <td></td>
      </tr>
      <tr>
        <td>Room</td>
        <td>973</td>
        <td>8</td>
        <td>Pig</td>
        <td>Success</td>
        <td>0:00:06</td>
        <td>Purple</td>
        <td></td>
      </tr>
      <tr>
        <td>Shower</td>
        <td>547</td>
        <td>9</td>
        <td>Horse</td>
        <td>Success</td>
        <td>0:09:26</td>
        <td>Red</td>
        <td></td>
      </tr>
    </tbody>
  </table>

【问题讨论】：

如果您不想使用库，('tr').each 应该做什么？好像有错别字。
另外，<script> 标签中有 CSS。
如果你有 python 代码生成 HTML 表格，那么为什么不直接将适当的类添加到相应的<tr> 元素？
@SunnyPatel - 在我研究并尝试过的所有代码中，这个 sn-p 似乎是最有希望的；授予的 python 代码可能会更有效，但是我想找到一个 javascript 解决方案，因为我成功地使用 js 对表列进行排序
既然它们并不真正相关，为什么不在你的 Python 代码中发布同样的问题呢？我会看看如何回答这两个问题。

标签： javascript html

【解决方案1】：

对于这个问题的纯 JS 解决方案（否定你曾尝试实现 jQuery 解决方案的事实），只需使用以下内容：

function resultFormatting() {
  var rows = document.getElementById("myTable").getElementsByTagName('tr');
  for (var i = 0; i < rows[0].children.length && rows[0].children[i].innerHTML !== "Result"; i++);
  for (var j = 1; j < rows.length; j++) {
    rows[j].classList.add(rows[j].children[i].innerHTML === "Success" ? 'selected' : 'bad');
  }
};

这会获取myTable 中的所有行。在第一行搜索“结果”，以防您想重新排序列并将该索引保存到 i。

然后代码遍历剩余的行，根据i'th 列的值添加您为行部分实现的两个类之一。

这是完整的 sn-p：

function sortTable(n) {
  var table, rows, switching, i, x, y, shouldSwitch, dir, switchcount = 0;
  table = document.getElementById("myTable");
  switching = true;
  dir = "asc";
  while (switching) {
    switching = false;
    rows = table.getElementsByTagName("TR");
    for (i = 1; i < (rows.length - 1); i++) {
      shouldSwitch = false;
      x = rows[i].getElementsByTagName("TD")[n];
      y = rows[i + 1].getElementsByTagName("TD")[n];
      if (dir == "asc") {
        if (x.innerHTML.toLowerCase() > y.innerHTML.toLowerCase()) {
          shouldSwitch = true;
          break;
        }
      } else if (dir == "desc") {
        if (x.innerHTML.toLowerCase() < y.innerHTML.toLowerCase()) {
          shouldSwitch = true;
          break;
        }
      }
    }
    if (shouldSwitch) {
      rows[i].parentNode.insertBefore(rows[i + 1], rows[i]);
      switching = true;
      switchcount++;
    } else {
      if (switchcount == 0 && dir == "asc") {
        dir = "desc";
        switching = true;
      }
    }
  }
}

function resultFormatting() {
  var rows = document.getElementById("myTable").getElementsByTagName('tr');
  for (var i = 0; i < rows[0].children.length && rows[0].children[i].innerHTML !== "Result"; i++);
  for (var j = 1; j < rows.length; j++) {
    rows[j].classList.add(rows[j].children[i].innerHTML === "Success" ? 'selected' : 'bad');
  }
};

resultFormatting();

td {
  width: 200px;
  height: 60px;
}

th {
  cursor: pointer;
}

.selected {
  background-color: green;
}

.bad {
  background-color: red;
}

<body>
  <p style="font-size:30px">
    Total tests: 10. Failed tests: 2. Skipped tests: 0.<br>
  </p>
  <p style="font-size:30px">
    Report test time 0:00:00<br>
  </p>
  <table border="1" id="myTable">
    <thead>
      <tr>
        <th onclick="sortTable(0)">Facility</th>
        <th onclick="sortTable(1)">Test_group</th>
        <th onclick="sortTable(2)">Test_number</th>
        <th onclick="sortTable(3)">Description</th>
        <th onclick="sortTable(4)">Result</th>
        <th onclick="sortTable(5)">Execution_time</th>
        <th onclick="sortTable(6)">Information</th>
        <th onclick="sortTable(7)">Output</th>
      </tr>
    </thead>
    <tbody>

      <tr>
        <td>Room</td>
        <td>468</td>
        <td>0</td>
        <td>Horse</td>
        <td>Success</td>
        <td>0:14:39</td>
        <td>Brown</td>
        <td></td>
      </tr>
      <tr>
        <td>Den</td>
        <td>288</td>
        <td>1</td>
        <td>Mule</td>
        <td>Success</td>
        <td>0:00:21</td>
        <td>Brown</td>
        <td></td>
      </tr>
      <tr>
        <td>Den</td>
        <td>660</td>
        <td>2</td>
        <td>Horse</td>
        <td>Success</td>
        <td>0:05:47</td>
        <td>Brown</td>
        <td></td>
      </tr>
      <tr>
        <td>Patio</td>
        <td>148</td>
        <td>3</td>
        <td>Pig</td>
        <td>Fail</td>
        <td>0:14:34</td>
        <td>Red</td>
        <td></td>
      </tr>
      <tr>
        <td>Patio</td>
        <td>386</td>
        <td>4</td>
        <td>Horse</td>
        <td>Fail</td>
        <td>0:13:07</td>
        <td>Brown</td>
        <td></td>
      </tr>
      <tr>
        <td>Room</td>
        <td>238</td>
        <td>5</td>
        <td>Pig</td>
        <td>Success</td>
        <td>0:13:17</td>
        <td>Brown</td>
        <td></td>
      </tr>
      <tr>
        <td>Den</td>
        <td>988</td>
        <td>6</td>
        <td>Dog</td>
        <td>Success</td>
        <td>0:05:13</td>
        <td>Red</td>
        <td></td>
      </tr>
      <tr>
        <td>Room</td>
        <td>256</td>
        <td>7</td>
        <td>Mule</td>
        <td>Success</td>
        <td>0:05:32</td>
        <td>Purple</td>
        <td></td>
      </tr>
      <tr>
        <td>Room</td>
        <td>973</td>
        <td>8</td>
        <td>Pig</td>
        <td>Success</td>
        <td>0:00:06</td>
        <td>Purple</td>
        <td></td>
      </tr>
      <tr>
        <td>Shower</td>
        <td>547</td>
        <td>9</td>
        <td>Horse</td>
        <td>Success</td>
        <td>0:09:26</td>
        <td>Red</td>
        <td></td>
      </tr>
    </tbody>
  </table>

【讨论】：

哇，不知道你是如何确定我尝试了 jquery tablesorter，但我确实做到了...我尝试了几种方法来合并代码，但没有成功，我会继续尝试，因为我相信我顺其自然……
@fjm 同样，python 解决方案是最好的。从您的编辑中，如果您使用该信息写一个问题，我可以立即告诉您如何解决它。
请看stackoverflow.com/questions/51600410/…
如果这对您有用，请接受。您只需要在table is loaded into the DOM 之后执行该函数。
啊……是的……好吧，所以我会检查所有代码，看看我做错了什么，一旦我做了任何需要的更改，我会标记正如回答，非常感谢 Sunny