如何有条件地格式化我的 HTML 表格？答案

【问题标题】：How can I conditionally format my HTML table?如何有条件地格式化我的 HTML 表格？
【发布时间】：2019-07-28 21:01:42
【问题描述】：

<td Class='metric' title='Test gave a performance metric.' lastPassTag=''>1997.0</td>
<td Class='metric' title='Test gave a performance metric.' lastPassTag=''>1997.0</td>
<td Class='metric' title='Test gave a performance metric.' lastPassTag=''>1997.0</td>
<td Class='metric' title='Test gave a performance metric.' lastPassTag=''>1997.0</td>
</tr><tr class='detail-hide'><td Class='result-name '>pmu: COMMITTED_PKT_BSB</td>
<td Class='metric' title='Test gave a performance metric.' lastPassTag=''>1655.0</td>
<td Class='metric' title='Test gave a performance metric.' lastPassTag=''>1836.0</td>
<td Class='metric' title='Test gave a performance metric.' lastPassTag=''>1655.0</td>
<td Class='metric' title='Test gave a performance metric.' lastPassTag=''>1836.0</td>

我有一个像上面这样的 HTML 表格我正在尝试根据应用于那里的数字的公式进行条件格式设置我试过这个：

var tb = document.getElementByClass('metric')

我无法获得这些值任何修改或建议表示赞赏谢谢

【问题讨论】：

document.getElementsByClassName("metric")

标签： javascript html arrays string

【解决方案1】：

您的代码的唯一问题是您使用了错误的 js 上下文来使用 js 搜索类。

document.getElementByClass('metric')

因为类可以超过 1，所以选择类的上下文是有元素而不是像下面这样的元素 应该是元素（复数）而不是元素（单数）

document.get元素ByClass('metric')

希望这能解决您的问题。

如果需要任何其他帮助，请在这里评论，我会尽力解决

【讨论】：

谢谢。能否请您告诉我如何查看获得的内容
@Ganga 你可以使用 console.log(tb);这将在您的控制台窗口中显示所有内容
@Ganga 希望这会有所帮助。或者你也可以使用 document.write(tb).innerHTML;在浏览器上显示其内容。
for (var index = 0; index
我想要内部内容

【解决方案2】：

方法不对——你要使用document.getElementsByClassName：

var tb = document.getElementByClass("metric");

您也可以使用querySelectorAll 来仅获取具有metric 类的td 元素：

var tb = document.querySelectorAll("td.metric");

【讨论】：

【解决方案3】：

有两个问题：

1) 您错过了第一个<tr> 和最后一个</tr>，还必须将您的trs 包裹在table 标记中。

2) 改变：

document.getElementByClass('metric') ;

收件人：

document.getElementsByClassName('metric') ;

var tb = document.getElementsByClassName('metric') ;

console.log(tb) ;

<table>
<tr>
  <td class='metric' title='Test gave a performance metric.' lastPassTag=''>1997.0</td>
  <td Class='metric' title='Test gave a performance metric.' lastPassTag=''>1997.0</td>
  <td Class='metric' title='Test gave a performance metric.' lastPassTag=''>1997.0</td>
  <td Class='metric' title='Test gave a performance metric.' lastPassTag=''>1997.0</td>
</tr>
<tr class='detail-hide'><td Class='result-name '>pmu: COMMITTED_PKT_BSB</td>
  <td Class='metric' title='Test gave a performance metric.' lastPassTag=''>1655.0</td>
  <td Class='metric' title='Test gave a performance metric.' lastPassTag=''>1836.0</td>
  <td Class='metric' title='Test gave a performance metric.' lastPassTag=''>1655.0</td>
  <td Class='metric' title='Test gave a performance metric.' lastPassTag=''>1836.0</td>
</tr>
</table>

【讨论】：