Question

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

背景：修改带有表生成html的python代码，已添加“点击排序”功能 -尝试了几种用于条件格式化的选项，但没有一个成功 -真正的新手，因此删除所有示例代码 -专注于代码末尾的功能resultFormatting

<img src="$1" />

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

Answer 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列的值为行添加部分实现的两个类之一。

完整的代码段如下：

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>

使用JavaScript条件格式化html表

1 个答案: