Click a link in a table row based on text in that row

Question

I have a table which has multiple rows and a link on the end.

I want to click on the link in the row which has the text I'm looking for. Example:

<table class="repeater large">
  <tbody>
    <tr>
      <td headers="Cardholder ID" nowrap="nowrap">1234</td>
      <td headers="Cardholder Name">JONATHAN</td>
      <td headers="Client Name">Some Company</td>
      <td headers="CardStatus">Closed</td>
      <td headers="Card Last Four">1234</td>
      <td headers="View" nowrap="nowrap"><a id="button" title="Activity" href="#">Activity</a></td>
    </tr>
    <tr class="alternaterow">
      <td headers="Cardholder ID" nowrap="nowrap">5555</td>
      <td headers="Cardholder Name">JONATHAN</td>
      <td headers="Client Name">Some Company</td>
      <td headers="CardStatus">Active</td>
      <td headers="Card Last Four">555</td>
      <td headers="View" nowrap="nowrap"><a id="button" title="Activity" href="#">Activity</a></td>
    </tr>
  </tbody>
</table>

I want to click the anchor on the row where Cardholder ID is '5555' I'm curious on how this would be done with CapserJS and finding the specific selector to do this.

I've tried breaking down the table into a array and getting the specific child number.

I was trying to create a way to get to that specific link in the table.

function getLinks() {
  var links = document.querySelectorAll('#page > table');
  return Array.prototype.map.call(links, function(e) {
    return e.getAttribute('id');
  });
}

I simple need to get that link on the row of my choice.

You should check https://stackoverflow.com/q/37098405/2174382 — guleryuz, Jun 09 '19 at 18:52

score 0 · Answer 1 · answered Jun 09 '19 at 18:47

You could iterate over the table rows then get the id from the first element. If the text equals the ID you are looking for then get the last element and click();

var rows = document.querySelectorAll('table tbody tr');

[].forEach.call(rows, function(tr) {
  var td = tr.querySelector('td:first-child');
  if (td.innerText === '5555')
        tr.querySelector('td:last-child').click();
});

See the fiddle here

Click a link in a table row based on text in that row

1 Answers1