Question

我有以下jquery，可让我在超过阈值（在本例中为13）的所有html表中突出显示所有td：

var table = document.getElementById('my_table');
var tbody = table.getElementsByTagName('tbody')[0];
var cells = tbody.getElementsByTagName('td');
var specificheader = tbody.getElementsByTagName('th');

for (var i=0, len=cells.length; i<len; i++){
  if (parseInt(cells[i].innerHTML,10) > 13){
    cells[i].className = 'red';
}
else if (parseInt(cells[i].innerHTML,10) < -0.1){
    cells[i].className = 'green';}
}

带有相应的HTML：

<table id="my_table">
<thead>
<tr style="text-align: right;">
  <th></th>
  <th>Vibration 1</th>
  <th>Vibration 2</th>
</tr>
</thead>
<tbody>
<tr>
  <th>2018-05-14</th>
  <td>0.02</td>
  <td>0.09</td>
  <td>0.11</td>
  <td class="red">13.26</td>
  <td>1.72</td>
  <td class="red">14.98</td>
</tr>
<tr>
  <th>2018-05-15</th>
  <td>0.02</td>
  <td>0.05</td>
  <td>0.07</td>
  <td class="red">13.27</td>
  <td>1.54</td>
  <td class="red">14.82</td>
</tr>
</tbody>
</table>

我如何将其限制为仅突出显示特定的th，例如振动2？

先谢谢您。

Answer 1

这可能是一种简单的方法。您只需更改JavaScript即可选择tr的nth-child（）：

var cells = tbody.querySelectorAll('td:nth-child(7)');

您可以对此进行一些处理以使其动态化，以便您可以通过编程方式进行所需的操作。我认为它实际上将第四个细胞算作一个孩子。

Answer 2

即使一个表提供一个二维表，html节点的层次结构也只是一维的，因此您不能仅突出显示一列

一种可能的解决方案可能是在所有td标签上添加一列列标记，例如

<tr>
<td class="col-1">123</td>
<td class="col-2">4.56</td>
...
</tr>
<tr>
<td class="col-1">1234</td>
<td class="col-2">4.567</td>
...
</tr>

然后相应地向jQuery添加条件基本实现：

for (var i=0, len=cells.length; i<len; i++){ if (parseInt(cells[i].innerHTML,10) > 13){ 
var colcol = cells[i].getAttribute("class");

var tds = document.getElementsByClassName(colcol);
for (var j = 0;j < tds.length ;j++) {
 (tds[j]).addClass('red');
}

请注意，如果td具有多个类，我们将只需要获取列类这可以通过在colcol var上使用split然后采用第一类来完成或使用regexp等。

jQuery突出显示表中而不是整个表中单个列的文本

2 个答案: