How do I find the value of 2nd column (td element) of 4th row (tr element) in jquery?

user_7697087 0
Viewed 82

My table has below structure

<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>

How do I find the fetch the value of 2nd td element (Value04) in 4th row ?

I am trying below code

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

I am getting below error --

VM3590:3 ERROR: Execution of script 'My Script' failed! Cannot read property 'text' of undefined

I am new to jquery. Any help would be appreciated. Thanks in advance.

html jquery
2 Answers

You can use ($("table tbody tr:eq(3) td:eq(1)").text() to get that value .

Demo Code :

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>

user_106064000

The issue is this bit

row[1].text()

because

$('.table-class-01 tr').eq(3)

will return a jquery collection/object with a single entry, the 4th row, so row[1] is index out of bounds (0-based). It does not contain an array of cells.

You could have done:

let row = $('.table-class-01 tr').eq(3);
let col = row.find("td").eq(1);

(or combined to a single selector as in the other answer, but I wanted to add the reason for row[1] not working which the other answer was missing).

user_21815140
Related