Question

我有以下HTML。如何获取JavaScript中TD下tr class="status_visible"的内容？我已经突出显示了我对以下代码感兴趣的td。可能有多个status_visible行。我只对第一行感兴趣。

没有id，因此我无法使用getElementById()。（我也不能使用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>

Answer 1

将document.querySelector()与此选择器一起使用：

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

...其中n是您感兴趣的td的列（从1开始）。

例如，这将抓取td的第tr个课程“status_visible”的文字内容：

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

<强>段：

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>

Answer 2

您可以使用document.getElementsByClassName()方法，然后遍历找到的元素。

let matching_elements = document.getElementsByClassName('status_visible')

for (element of matching_elements) {
    console.log(element)
}

Answer 3

您可以遍历所有td并使用.textContent显示文字内容，如：

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>

获取没有＆＃34; id＆＃34;的td的内容属性

3 个答案: