Как найти нужный tr td?

Question

<tr>
  <td colspan="2" class="hide-tr name-pnd">Имя</td>
</tr>
<tr>
  <td colspan="2" class="hide-tr search-click">тест</td>
</tr>
<tr>
  <td>Оператор ЭВМ</td>
  <td>dd</td>
</tr>
<tr>
  <td>Оператор ЭВМ</td>
  <td>dd</td>
</tr>
<tr>
  <td>Оператор ЭВМ</td>
  <td>dd</td>
</tr>
<tr>
  <td colspan="2" class="hide-tr name-pnd">Имя 2</td>
</tr>
<tr>
  <td colspan="2" class="hide-tr search-click">тест 2</td>
</tr>
<tr>
  <td>Оператор ЭВМ</td>
  <td>ddd</td>
</tr>
<tr>
  <td colspan="2" class="hide-tr search-click">тест 3</td>
</tr>
<tr>
  <td>Оператор ЭВМ</td>
  <td>ddd</td>
</tr>

Есть таблица, при клике по search-click нужно получить первое ближайшее сверху содержание td с классом name-pnd. Т.е я жму на td с содержанием тест 2 - получаю значение td с содержанием Имя 2, если я жму тест 3 получаю Имя 2 и т.д Как это сделать?

Answer 1

$('.search-click').on('click', function() {
  var $prevTr = $(this).parent().prev();      // Предыдущий <tr>
  var $pnd = $prevTr.find('.name-pnd');       // Ищем внутри него `name-pnd`

  while( $prevTr.length && !$pnd.length ) {   // Повторяем, пока не найдем
    $prevTr = $prevTr.prev();
    $pnd = $prevTr.find('.name-pnd');
  }
  
  console.clear();
  console.log( $pnd.text() || "Не найден!" );
});

td { border: 1px solid #999; width: 200px; cursor: pointer; }
.name-pnd { background-color: orange; }
.search-click { background-color: #ddd; }

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<table>
  <tr><td class="search-click">Ошибка</td></tr>
  
  <tr><td class="name-pnd">Цель 1</td></tr>
  <tr><td class="search-click">клик 1</td></tr>
  
  <tr><td class="name-pnd">Цель 2</td></tr>
  <tr><td class="search-click">клик 2</td></tr>
  <tr><td class="search-click">клик 3</td></tr>
  <tr><td class="search-click">клик 4</td></tr>
</table>

БЛОГ НА HUSL

Как найти нужный tr td?

Ответы (1 шт):