从 table 单元格中提取值的选择器

Question

我想从 table 单元格 <td class="ant-table-cell" style="">15:43:42</td> 中获取时间值 15:43:42。然而控制台测试似乎并不完全正确。

我应该使用哪个选择器以及如何提取值？

HTML:

<div class="ant-table-content" style="outline: green dotted 2px !important;">
   <table style="">
      <thead class="ant-table-thead" style="">
         <tr style="">
            <th class="ant-table-cell">Date</th>
            <th class="ant-table-cell">Time</th>
            <th class="ant-table-cell">Model</th>
         </tr>
      </thead>
      <tbody class="ant-table-tbody" style="">
         <tr data-row-key="852db0ee-bbaa-4aa2-a1ee-60836c6b5980" class="ant-table-row ant-table-row-level-0">
            <td class="ant-table-cell ant-table-selection-column" style=""><label class="ant-checkbox-wrapper"><span class="ant-checkbox"><input type="checkbox" class="ant-checkbox-input" value=""><span class="ant-checkbox-inner"></span></span></label></td>
            <td class="ant-table-cell ant-table-cell-with-append" style="">
            </td>
            <td class="ant-table-cell" style="">23/05/2022</td>
            <td class="ant-table-cell" style="">15:43:42</td>
            <td class="ant-table-cell">16000samplerate-60train-40test-v1-16k</td>
         </tr>
      </tbody>
   </table>
</div>

document.querySelectorAll('table tr td:nth-child(4)');

的控制台结果

console result

Answer 1

如果你的意思是你应该使用哪个 JS 选择器，那么我的答案如下：向所需的 td 添加了一个 class：cls.

var item = document.getElementsByClassName("cls");
for (let i = 0; i < item.length; i++) {
    console.log(item[i].textContent);
}

<div class="ant-table-content" style="outline: green dotted 2px !important;">
   <table style="">
      <thead class="ant-table-thead" style="">
         <tr style="">
            <th class="ant-table-cell">Date</th>
            <th class="ant-table-cell">Time</th>
            <th class="ant-table-cell">Model</th>
         </tr>
      </thead>
      <tbody class="ant-table-tbody" style="">
         <tr data-row-key="852db0ee-bbaa-4aa2-a1ee-60836c6b5980" class="ant-table-row ant-table-row-level-0">
            <td class="ant-table-cell ant-table-selection-column" style=""><label class="ant-checkbox-wrapper"><span class="ant-checkbox"><input type="checkbox" class="ant-checkbox-input" value=""><span class="ant-checkbox-inner"></span></span></label></td>
            <td class="ant-table-cell ant-table-cell-with-append" style="">
            </td>
            <td class="ant-table-cell" style="">23/05/2022</td>
            <td class="ant-table-cell cls" style="">15:43:42</td>
            <td class="ant-table-cell">16000samplerate-60train-40test-v1-16k</td>
         </tr>
      </tbody>
   </table>
</div>

Answer 2

首先 querySelectorAll selects all 匹配元素并且 returns 始终是 nodeList 而不是单个元素。要 select 单个元素，请使用 querySelector，然后非常具体地说明您想要哪个元素 select。在您的示例中，您可以这样做

const tdNode = document.querySelector('tbody > tr td:nth-child(4)');
const text = tdNode.innerText;

当然，如果您可以在所需元素上设置 class 会更容易。

从 table 单元格中提取值的选择器

selector to extract value from table cell

css