如何使用jQuery在表格行下分别选择各个表格数据的文本

Question

This is the code

<tbody id="table-body">

 <tr>
      <td id="c1">AAA0</td>
      <td id="c2">2%</td>

 </tr>

</tbody>

I want to select data of ID c1 under < tr > tag. I am using this jQuery code but it is selecting whole text under < tr > tag.

$("#table-body").on('click','tr',function(e){
e.preventDefault();
console.log($(this).text());
})

I am getting AAA02% as the output if this code. I want to select AAA0 and 2 separately. How to do it ?

Answer 1

Since there is more than one td element in each clicked tr element, you have to loop through each of them to get the text individually.

You can use find() and each() like the following way:

 $("#table-body").on('click','tr',function(e){ $(this).find('td').each(function(){ console.log($(this).text()); }) }) 

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <table> <tbody id="table-body"> <tr> <td id="c1">AAA0</td> <td id="c2">2%</td> </tr> </tbody> </table> 

Answer 2

Try this:

console.log($(this).find('.c1').text());

And use class attribute instead of id

Answer 3

You are getting all text inside tr because you are binding click event on the tr and so $(this) refers to the tr you clicked.

To get AAA0 only, you can use children() and pass id to select a specific td

$("#table-body").on('click','tr',function(e){
    console.log($(this).children('#c1').text());
});

But since you are assinginig id to the td 's, you can also directly attach the click event to the td as

$("#table-body #c1").on('click','tr',function(e){
  console.log($(this).text());
});