Question

我正在尝试更改某些td值颜色，但由于它没有任何ID我应该如何使用javascript获取它？

<td class="fieldlabel" width="20%">Mark</td>
<td class="fieldlabel" width="20%">Mary</td>
<td class="fieldlabel" width="20%">Alex</td>

例如，我希望将“玛丽”改为红色，如何在不知道任何div或id的情况下实现它？

var mary = ....?
mary.style.color = "#ff0000";

Answer 1

使用document.querySelectorAll()获取目标元素的引用，然后迭代这些元素并使用textContent属性验证其文本。

＆＃13;

document.querySelectorAll('td.fieldlabel').forEach(function(x) {
  if (x.textContent.trim() == 'Mary') {
    x.style.color = "#ff0000";
  }
})

＆＃13;

<table>
  <tr>
    <td class="fieldlabel" width="20%">Mark</td>
    <td class="fieldlabel" width="20%">Mary</td>
    <td class="fieldlabel" width="20%">Alex</td>
  </tr>
</table>

＆＃13;

Answer 2

假设你知道位置＆＃34; mary＆＃34;是的，你可以直接改变颜色。

＆＃13;

var secondTd = document.getElementsByClassName("fieldlabel")[1];
secondTd.style.color = "red";

＆＃13;

<table>
  <tr>
    <td class="fieldlabel" width="20%">Mark</td>
    <td class="fieldlabel" width="20%">Mary</td>
    <td class="fieldlabel" width="20%">Alex</td>
  </tr>
</table>

＆＃13;

Answer 3

检查这个简单的<table></table>包装器。您可以使用changeColorByValue()或坐标changeColorByCoords()按值更改颜色（此方法使用基于零的坐标，这意味着如果您想引用第0行传递0 ）。

changeColorByValue()接受应该搜索的值作为第一个参数，第二个参数是新颜色，第三个参数（可选）是匹配后搜索应该继续。检查球机代码。

查看代码并告诉我某些内容是否不清楚

＆＃13;

var table = new Table('myTable');
table.changeColorByValue('Mary', '#ff0000');
table.changeColorByValue('Chris', 'orange', true);
table.changeColorByCoords(1, 2, 'green');

function Table(tableId) {
  var self = this;
  self.table = document.getElementById(tableId);

  self.changeColorByValue = function(sought, color, stopOnFirstMatch) {

    var table = self.table;
    var stopOnFirst = typeof stopOnFirstMatch !== 'undefined' ? stopOnFirstMatch : false;
    
    exit:
    for (var i = 0, row; row = table.rows[i]; i++) {
      for (var j = 0, col; col = row.cells[j]; j++) {
        if (col.innerHTML === sought) {
          col.style.color = color;
          if (stopOnFirst) {
            break exit;
          }
        }
      }
    }
    
  }

  self.changeColorByCoords = function(row, col, color) {
    try {
      self.table.rows[row].cells[col].style.color = color;
    } catch (e) {}
  }

}

＆＃13;

<table id="myTable">
  <tr>
    <td class="fieldlabel" width="20%">Mark</td>
    <td class="fieldlabel" width="20%">Mary</td>
    <td class="fieldlabel" width="20%">Alex</td>
  </tr>
  <tr>
    <td class="fieldlabel" width="20%">Chris</td>
    <td class="fieldlabel" width="20%">Alan</td>
    <td class="fieldlabel" width="20%">Brian</td>
  </tr>
  <tr>
    <td class="fieldlabel" width="20%">Chris</td>
    <td class="fieldlabel" width="20%">John</td>
    <td class="fieldlabel" width="20%">Mary</td>
  </tr>
</table>

＆＃13;

Answer 4

这只是为了补充Satpal的答案。

更具功能性的方法：

＆＃13;

Array.from(document.querySelectorAll('td.fieldlabel'))
    .filter(el => el.textContent.trim() === 'Mary')
    .forEach(x =>x.style.color = "#ff0000");

＆＃13;

<table>
  <tr>
    <td class="fieldlabel" width="20%">Mark</td>
    <td class="fieldlabel" width="20%">Mary</td>
    <td class="fieldlabel" width="20%">Alex</td>
  </tr>
</table>

＆＃13;

假设只有一个元素包含＆＃34; Mary＆＃34;：

＆＃13;

Array.from(document.querySelectorAll('td.fieldlabel'))
    .find(el => el.textContent.trim() === 'Mary')
    .style.color = "#ff0000";

＆＃13;

<table>
  <tr>
    <td class="fieldlabel" width="20%">Mark</td>
    <td class="fieldlabel" width="20%">Mary</td>
    <td class="fieldlabel" width="20%">Alex</td>
  </tr>
</table>

＆＃13;

按值获取td元素

4 个答案: