Как я могу получить элемент в строке конкретной таблицы, используя JQuery

Question

У меня есть таблица, и я хочу получить источник изображения в третьей строке, используя jquery.

<tr>
    <th>First Name</th>
    <th>Last Name</th>
     <th>Age</th>
     <th>Avatar</th>
  </tr>      
 <tr>
    <td>Peter</td>
    <td>Jason</td>
    <td>29</td>
     <td><img src="json.gif"/></td>
  </tr>
  <tr>
    <td>Victoria</td>
    <td>Cooper</td>
    <td>38</td>
     <td><img src="cooper.gif"/></td>
  </tr>

Answer 1

Вы можете получить n-й элемент с помощью : eq ()

https://api.jquery.com/eq-selector/

Для вашего случая:

$("td:eq(2) > img").attr('src');

Answer 2

Есть несколько способов, но $('#someTableId').find('tr').eq(2) будет работать.

find ()

eq ()

NOTE

• в строке заголовка, ваш HTML искажен, у вас есть строка как th с td s внутри, которая все равно должна быть элементом tr с th элементы внутри него, см. исправления в приведенном ниже примере
• Ниже добавлен идентификатор таблицы, чтобы настроить таргетинг только на строки этой таблицы, при необходимости отрегулируйте

Вот простойпример

$('#someTableId').find('tr').eq(2).addClass('test');

.test td {
background-color:yellow;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table id="someTableId"> 
<tr>
    <th>First Name</th>
    <th>Last Name</th>
     <th>Age</th>
     <th>Avatar</th>
  </tr>     
 <tr>
    <td>Peter</td>
    <td>Jason</td>
    <td>29</td>
     <td><img src="json.gif"/></td>
  </tr>
  <tr>
    <td>Victoria</td>
    <td>Cooper</td>
    <td>38</td>
     <td><img src="cooper.gif"/></td>
  </tr>
</table>

Answer 3

вы можете использовать псевдоселектор css nth-child()

. CSS-псевдокласс: nth-child () сопоставляет элементы на основе их положения в группе братьев и сестер

Вы можете прочитать больше здесь : nth-child

.

console.log($('#tableID tr:nth-child(3) img').attr('src'));

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table id="tableID">
 <tr>
  <th>
      <td>First Name</td>
      <td>Last Name</td>
      <td>Age</td>
      <td>Avatar</td>
  </th> 
 </tr>
 <tr>
    <td>Peter</td>
    <td>Jason</td>
    <td>29</td>
     <td><img src="json.gif"/></td>
  </tr>
  <tr>
    <td>Victoria</td>
    <td>Cooper</td>
    <td>38</td>
     <td><img src="cooper.gif"/></td>
  </tr>
</table>