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

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

所以我试着在表格中循环，如果包含"禁止"的单元格值等于"yes"，那么我想随时将该行的url标记颜色更改为红色(链接、已访问和悬停(。

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

任何帮助都将不胜感激。

Answer 1

如果将样式添加到单元格内的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>

Answer 2

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

row.cells[0]只是一个HTML元素引用。只需在这个元素中找到一个标签，并像您所做的那样更新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>