html - 如何在 jquery 中找到第 4 行(tr 元素)的第 2 列(td 元素)的值？

Question

我的表结构如下

<table class=table-class-01>
   <tbody>
   <tr>
       <td>
           <span class=field-type01> Key01</span>
       </td>
       <td>
           <span class=field-type-02></span>
           <span> Value-01
       </td>
   </tr>
<tr>
       <td>
           <span class=field-type01> Key02</span>
       </td>
       <td>
           <span class=field-type-02></span>
           <span> Value-02
       </td>
   </tr>
<tr>
       <td>
           <span class=field-type01> Key03</span>
       </td>
       <td>
           <span class=field-type-02></span>
           <span> Value-03
       </td>
   </tr>
<tr>
       <td>
           <span class=field-type01> Key04</span>
       </td>
       <td>
           <span class=field-type-02></span>
           <span> Value-04
       </td>
   </tr>
<tr>
       <td>
           <span class=field-type01> Key05</span>
       </td>
       <td>
           <span class=field-type-02></span>
           <span> Value-05
       </td>
   </tr>
   <tr>
       <td>
           <span class=field-type01> Key06</span>
       </td>
       <td>
           <span class=field-type-02></span>
           <span> Value-06
       </td>
   </tr>
   <tr>
       <td>
           <span class=field-type01> Key07</span>
       </td>
       <td>
           <span class=field-type-02></span>
           <span> Value-07
       </td>
   </tr>
   <tr>
       <td>
           <span class=field-type01> Key08</span>
       </td>
       <td>
           <span class=field-type-02></span>
           <span> Value-08
       </td>
   </tr>

   </tbody>
</table>

如何在第 4 行中找到获取第 2 个 td 元素 (Value04) 的值？

我正在尝试下面的代码

let row = $('.table-class-01 tr').eq(3)
let column = row[1].text();

我遇到了以下错误 --

VM3590:3 错误:执行脚本“我的脚本”失败!无法读取未定义的属性“文本”

我是 jquery 的新手。任何帮助，将不胜感激。提前致谢。

Answer 1

您可以使用 ($("table tbody tr:eq(3) td:eq(1)").text() 获取该值。

演示代码:

console.log($("table tbody tr:eq(3) td:eq(1)").text().trim())

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table class=table-class-01>
  <tbody>
    <tr>
      <td>
        <span class=field-type01> Key01</span>
      </td>
      <td>
        <span class=field-type-02></span>
        <span> Value-01</span>
       </td>
   </tr>
<tr>
       <td>
           <span class=field-type01> Key02</span>
      </td>
      <td>
        <span class=field-type-02></span>
        <span> Value-02</span>
       </td>
   </tr>
<tr>
       <td>
           <span class=field-type01> Key03</span>
      </td>
      <td>
        <span class=field-type-02></span>
        <span> Value-03</span>
       </td>
   </tr>
<tr>
       <td>
           <span class=field-type01> Key04</span>
      </td>
      <td>
        <span class=field-type-02></span>
        <span> Value-04</span>
       </td>
   </tr>
<tr>
       <td>
           <span class=field-type01> Key05</span>
      </td>
      <td>
        <span class=field-type-02></span>
        <span> Value-05</span>
       </td>
   </tr>
   <tr>
       <td>
           <span class=field-type01> Key06</span>
      </td>
      <td>
        <span class=field-type-02></span>
        <span> Value-06</span>
       </td>
   </tr>
   <tr>
       <td>
           <span class=field-type01> Key07</span>
      </td>
      <td>
        <span class=field-type-02></span>
        <span> Value-07</span>
       </td>
   </tr>
   <tr>
       <td>
           <span class=field-type01> Key08</span>
      </td>
      <td>
        <span class=field-type-02></span>
        <span> Value-08</span>
       </td>
   </tr>

   </tbody>
</table>