如何访问 .js table 循环中的 <a> 标签？

Question

HTML:

<tr id="header-row">
  <th class="tableheaders" id="t_headersteamlink">steamlink</th>
  <th class="tableheaders" id="t_headername">name</th>
  <th class="tableheaders" id="t_headerbanned">banned?</th>
  <th class="tableheaders" id="t_headerbandate">banDate</th>
  <th class="tableheaders" id="t_headercreator">creator</th>
  <th class="tableheaders" id="t_headercreationdate">creationDate</th>
</tr>

<tr class="datarow">
  <td ><a href="https://steamcommunity.com/id/example">steamcommunity.com/id/example</a></td>
  <td>exampleUser</td>
  <td>yes</td>
  <td>24/06/2021</td>
  <td>exampleCreator</td>
  <td>20/06/2021</td>
</tr>

JavaScript:

var table = document.getElementById("steamtable");

window.onload = function() {

for (var i = 0, row; row = table.rows[i]; i++) {

    if (row.cells[2].innerText == "yes") {
        row.cells[1].style.color = 'red';
        row.cells[2].style.color = 'red';
        row.cells[3].style.color = 'red';
    }

  }

}

所以我试图遍历 table，如果包含 'banned?' 值的单元格等于 'yes'，那么我想更改 url 的标签颜色该行始终变为红色（link，已访问并悬停）。

技术上我知道如何更改颜色，我只是不知道如何在这种情况下访问 url 标签。我添加的 javascript 只是改变了一些单元格的颜色，而且效果很好。

如有任何帮助，我们将不胜感激。

Answer 1

使用getElementsByTagName通过标签名获取元素。

row.cells[0] 就是一个 HTML elements reference 。只需在此元素中找到一个标签，然后像您一样更新标签样式。

const table = document.getElementById("steamtable");

window.onload = function () {
  for (let i = 0, row; row = table.rows[i]; i++) {
    if (row.cells[2].innerText == "yes") {
      row.cells[0].getElementsByTagName('a')[0].style.color = 'red';
      row.cells[1].style.color = 'red';
      row.cells[2].style.color = 'red';
      row.cells[3].style.color = 'red';
    }
  }
}

<table id="steamtable">
<tr id="header-row">
  <th class="tableheaders" id="t_headersteamlink">steamlink</th>
  <th class="tableheaders" id="t_headername">name</th>
  <th class="tableheaders" id="t_headerbanned">banned?</th>
  <th class="tableheaders" id="t_headerbandate">banDate</th>
  <th class="tableheaders" id="t_headercreator">creator</th>
  <th class="tableheaders" id="t_headercreationdate">creationDate</th>
</tr>

<tr class="datarow">
  <td ><a href="https://steamcommunity.com/id/example">steamcommunity.com/id/example</a></td>
  <td>exampleUser</td>
  <td>yes</td>
  <td>24/06/2021</td>
  <td>exampleCreator</td>
  <td>20/06/2021</td>
</tr>
</table>

Answer 2

如果您将样式添加到该单元格内的 a 标记，它将起作用

像这样：

     row.cells[0].querySelector("a").style.color = "green";

querySelector 选择单元格内的一个元素

var table = document.getElementById("steamtable");
window.onload = function() {

for (var i = 0, row; row = table.rows[i]; i++) {

    if (row.cells[2].innerText == "yes") {
       row.cells[0].querySelector("a").style.color = "red";
      
    }

  }

}

<table border id="steamtable">
<tr id="header-row">
  <th class="tableheaders" id="t_headersteamlink">steamlink</th>
  <th class="tableheaders" id="t_headername">name</th>
  <th class="tableheaders" id="t_headerbanned">banned?</th>
  <th class="tableheaders" id="t_headerbandate">banDate</th>
  <th class="tableheaders" id="t_headercreator">creator</th>
  <th class="tableheaders" id="t_headercreationdate">creationDate</th>
</tr>

<tr class="datarow">
  <td ><a href="https://steamcommunity.com/id/example">steamcommunity.com/id/example</a></td>
  <td>exampleUser</td>
  <td>yes</td>
  <td>24/06/2021</td>
  <td>exampleCreator</td>
  <td>20/06/2021</td>
</tr>
  
  </table>

如何访问 .js table 循环中的 <a> 标签？

how to access an <a> tag inside a .js table loop?

html

javascript

css

html-table