CODEWITHSUNDEEP
javascripthtml
Em Ae
Em Ae

Reputation: 8734

Get the contents of a td without an "id" attribute

I have the following HTML. How can I fetch the contents of the TD which is under tr class="status_visible" in JavaScript?. I have highlighted the td that I am interested in the code below. There could be multiple status_visible rows. I am only interested in the first row.

There is no id, so I can't use getElementById(). (I also can't use jQuery)

<table class="colored">
    <thead>
        <tr>
            <th colspan="9">
                <h2>History</h2>
            </th>
        </tr>
        <tr>
            <th>Value</th>
            <th>Change Reason</th>
            <th>Changed By</th>
            <th>Changing Environment</th>
            <th>Change Date (UTC)</th>
        </tr>
    </thead>
    <tbody>
        <tr class="status_visible">
            <td>N</td>   <!-- get this value -->
            <td>CSS-ID: 343423</td>
            <td>login_details</td>
            <td>applicationname::signedinuser</td>
            <td>2018-01-02 21:09:47 +0000</td>
        </tr>
        <tr class="status_hidden">
            <td>Y</td>
            <td>CSS-ID:5554</td>
            <td>ServiceName</td>
            <td></td>
            <td>2014-02-19 13:37:50 +0000</td>
        </tr>
    </tbody>
</table>

Upvotes: 0

Views: 2321

Answers (2)

Zakaria Acharki
Zakaria Acharki

Reputation: 67525

You could loop through all the td's and show the text content using .textContent like :

var tds = document.querySelectorAll('tr.status_visible td');

for (var i = 0; i < tds.length; i++) {
  console.log(tds[i].textContent);
}


var tds = document.querySelectorAll('tr.status_visible td');

for (var i = 0; i < tds.length; i++) {
  console.log(tds[i].textContent);
}
<table class="colored">
  <thead>
    <tr>
      <th colspan="9">
        <h2>History</h2>
      </th>
    </tr>
    <tr>
      <th>Value</th>
      <th>Change Reason</th>
      <th>Changed By</th>
      <th>Changing Environment</th>
      <th>Change Date (UTC)</th>
    </tr>
  </thead>
  <tbody>
    <tr class="status_visible">
      <td>N</td>
      <td>CSS-ID: 343423</td>
      <td>login_details</td>
      <td>applicationname::signedinuser</td>
      <td>2018-01-02 21:09:47 +0000</td>
    </tr>
    <tr class="status_hidden">
      <td>Y</td>
      <td>CSS-ID:5554</td>
      <td>ServiceName</td>
      <td></td>
      <td>2014-02-19 13:37:50 +0000</td>
    </tr>
  </tbody>
</table>

Upvotes: 0

Rick Hitchcock
Rick Hitchcock

Reputation: 35680

Use document.querySelector() with this selector:

'tr.status_visible td:nth-child(n)'

… where n is the column of the td you're interested in (1-based).

For example, this will grab the text content of the first td of the tr having class "status_visible":

document.querySelector('tr.status_visible td:nth-child(1)').textContent

Snippet:

console.log(document.querySelector('tr.status_visible td:nth-child(1)').textContent);
<table class="colored">
  <thead>
    <tr>
      <th colspan="9">
        <h2>History</h2>
      </th>
    </tr>
    <tr>
      <th>Value</th>
      <th>Change Reason</th>
      <th>Changed By</th>
      <th>Changing Environment</th>
      <th>Change Date (UTC)</th>
    </tr>
  </thead>
  <tbody>
    <tr class="status_visible">
      <td>N</td>
      <td>CSS-ID: 343423</td>
      <td>login_details</td>
      <td>applicationname::signedinuser</td>
      <td>2018-01-02 21:09:47 +0000</td>
    </tr>
    <tr class="status_hidden">
      <td>Y</td>
      <td>CSS-ID:5554</td>
      <td>ServiceName</td>
      <td></td>
      <td>2014-02-19 13:37:50 +0000</td>
    </tr>
  </tbody>
</table>

Upvotes: 3

Related Questions