Получить текст внутри класса title

Question

У меня есть таблица, которая генерируется php. ЕЕ структура:

<tr>
            <td class="search_table_position col-md-1">
                <? echo $rank ?>
            </td>
            <td class="search_table_img col-md-2"> <img width="150px" height="150px" src="<? echo $image ?>" alt=""> </td>
            <td class="search_table_title col-md-8">
                <h3 class="name">
                    <? echo $title ?>
                </h3>
                <p>
                    <? echo $description ?>
                </p>
            </td>
            <td class="search_table_rating col-md-1">
                <i class="fa fa-star" style="color:yellow" aria-hidden="true">
                </i>
                <?echo $rating ?>
            </td>

        </tr>

Я хочу по клику на элемент таблицы "tr" вытянуть значение, находящееся внутри "search_table_title" в "h3 class = "name".Можно ли это сделать средствами жс без фреймворков? Спасибо

Answer 1

Делегирование событий:

document.querySelector('.table').addEventListener('click', function(ev) {
  console.log(ev.target.closest('tr').querySelector('h3.name').innerText);
})

<table class="table">
  <tr>
    <td class="search_table_position col-md-1">
      RANK
    </td>
    <td class="search_table_img col-md-2"> <img width="150px" height="150px" src="<? echo $image ?>" alt=""> </td>
    <td class="search_table_title col-md-8">
      <h3 class="name">
        TITLE
      </h3>
      <p>
        DESCRIPTION
      </p>
    </td>
    <td class="search_table_rating col-md-1">
      <i class="fa fa-star" style="color:yellow" aria-hidden="true"> </i>
      RATING
    </td>
  </tr>
</table>

БЛОГ НА HUSL

Получить текст внутри класса title

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