如何访问 .js 表循环中的 <a> 标记？答案

【问题标题】：how to access an <a> tag inside a .js table loop?如何访问 .js 表循环中的 <a> 标记？
【发布时间】：2021-09-27 23:18:44
【问题描述】：

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

  }

}

所以我试图循环遍历表格，如果单元格包含“禁止？”值等于“是”，然后我想始终将该行的 url 标记颜色更改为红色（链接、访问和悬停）。

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

任何帮助将不胜感激。

【问题讨论】：

url tag 表示标签？
是的 url 标签是一个标签。我想把'a'放在尖括号内，但它根本没有出现。很抱歉造成混乱。

标签： javascript html css html-table

【解决方案1】：

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

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

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>

【讨论】：

我建议使用querySelector()，因为它返回单个元素而不是数组，并且是一种更现代的方法。

【解决方案2】：

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

像这样：

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

querySelector 选择单元格内的 a 元素

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>

【讨论】：