0

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

  }

}

So i'm trying to loop trough the table and if the cell containing the 'banned?' value equals 'yes' then i want change the url tag color of that row to red at all times (link, visited and hover).

Technically i know how to change the colors, i just dont know how to access the url tag in this scenario. The javascript i added just changes the colors of some cells, and that works totally fine.

any help would be appreciated.

2
  • url tag means a tag?
    – hoangdv
    Jul 20, 2021 at 12:47
  • yes url tag means a tag. i wanted to put the 'a' inside angled brackets but then it doesn't show up at all. sorry for the confusion.
    – krobeN
    Jul 20, 2021 at 12:51

2 Answers 2

0

It will work if you add the style to the a tag inside that cell

like so:

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

The querySelector selects an a element inside the cell

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>

0

Use getElementsByTagName to get a element by tag name.

row.cells[0] just is a HTML elements reference . Just find a tag inside this element and update the stag style as you did.

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>

1
  • I'd suggest using querySelector(), as it returns a single element instead of an array and is a more modern approach. Jul 20, 2021 at 12:59

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.