Как выделить текст соответствующих данных таблицы отдельно под строкой таблицы с помощью jQuery

Question

Это код

<tbody id="table-body">

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

 </tr>

</tbody>

Я хочу выбрать данные с идентификатором c1 под тегом

.Я использую этот код jQuery, но он выбирает весь текст в теге .

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

Я получаю AAA02% в качестве вывода, если этот код.Я хочу выбрать AAA0 и 2 отдельно.Как это сделать?

Answer 1

Вы получаете весь текст внутри tr, потому что вы связываете событие click на tr, и поэтому $(this) относится к tr, на который вы нажали.

Чтобы получить Только AAA0 , вы можете использовать children() и передать id для выбора конкретного td

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

Но так как вы назначаете id для td, выможно также напрямую прикрепить событие click к td как

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

Answer 2

Поскольку в каждом выбранном элементе tr имеется более одного элемента td , вы должны пройти через каждый из них, чтобы получить текст по отдельности.

Выможно использовать find() и each() следующим образом:

$("#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 3

Попробуйте это:

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

И используйте атрибут класса вместо id