Возврат скрытого значения <td> с помощью jQuery

У него гораздо больше строк в tbody с фактическими значениями в реальном примере (он добавляет результаты из API в зависимости от поиска).

Я хотел бы щелкнуть строку, и я хочу, чтобы значение идентификатора дорожки в этой строке было возвращено console.info для начала. Он скрыт в CSS:

$("tbody").click(function() {
  var $songId = $(this).closest("tr").find(".hidden").text();
  console.info($songId);
});

.hidden {
  display: none;
}

<script src = "https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<table class = "song-table" id = "results-table">
  <thead>
    <tr>
      <th class = "subtitle-text">Track</th>
      <th class = "subtitle-text">Artist</th>
      <th class = "subtitle-text">Album</th>
      <th class = "hidden" id = "song-id">ID</th>
    </tr>
  </thead>
  <tbody id = "search-results-body">
    <tr>
      <td>Track name </td>
      <td>Artist name </td>
      <td>Album name </td>
      <td class = "hidden">Track ID </td>
    </tr>
    <tr>
      <td>Track name </td>
      <td>Artist name </td>
      <td>Album name </td>
      <td class = "hidden">Track ID </td>
    </tr>
    <tr>
      <td>Track name </td>
      <td>Artist name </td>
      <td>Album name </td>
      <td class = "hidden">Track ID </td>
    </tr>
  </tbody>
</table>

Это возвращается как пустое в консоли, что я предполагаю, потому что технически текста нет. Если я использую html(), он возвращает undefined.

Может где нибудь помочь вернуть значение скрытой строки?

Ваш пример не работает, потому что вы назначаете обработчик кликов телу вместо строк или ячеек, которые он содержит. Ключевое слово this в вашем обработчике относится к элементу tbody, у которого нет .closest("tr") (ой, как @MaxVollmer объяснил в своем ответе) (вам нужно будет назначить обработчик элементам td, чтобы closest работал).

— 10.09.2018 15:27

javascript jquery html

10.09.2018 12:39

Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией

В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.

Концепция локализации и ее применение в приложениях React ⚡️

Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...

Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer

В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...

Безумие обратных вызовов в javascript [JS]

Здравствуйте! Юный падаван 🚀. Присоединяйся ко мне, чтобы разобраться в одной из самых запутанных концепций, когда вы начинаете изучать мир...

Система управления парковками с использованием HTML, CSS и JavaScript

Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...

JavaScript Вопросы с множественным выбором и ответы

Если вы ищете платформу, которая предоставляет вам бесплатный тест JavaScript MCQ (Multiple Choice Questions With Answers) для оценки ваших знаний,...

Ответы 5

Вы хотите это?

$("tbody td").click(function(){
    var $songId = $(this).closest("tr").find(".hidden").text();
    console.info($songId);
});

.hidden {

  display:none;
  
}

<script src = "https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table class = "song-table" id  = "results-table">
                    <thead>
                        <tr>
                            <th class = "subtitle-text">Track</th>
                            <th class = "subtitle-text">Artist</th>
                            <th class = "subtitle-text">Album</th>
                            <th class = "hidden" id = "song-id">ID</th>
                        </tr>
                    </thead>
                    <tbody id = "search-results-body">
                      <tr>
              <td>Track name </td>
              <td>Artist name </td>
              <td>Album name </td>
              <td class = "hidden">Track ID 1</td>
            </tr>
            <tr>
              <td>Track name </td>
              <td>Artist name </td>
              <td>Album name </td>
              <td class = "hidden">Track ID 2</td>
            </tr>
            <tr>
              <td>Track name </td>
              <td>Artist name </td>
              <td>Album name </td>
              <td class = "hidden">Track ID 3</td>
            </tr>
                    </tbody>
                </table>

10.09.2018 12:44

I would like to click a row and I want the value of the track ID in that row to be returned

Затем вам нужно прикрепить событие к строке tr, например:

$("tr").click(function() {
  var $songId = $(this).find(".hidden").text();

  console.info($songId);
});

.hidden {
  display: none;
}

<script src = "https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<table class = "song-table" id = "results-table">
  <thead>
    <tr>
      <th class = "subtitle-text">Track</th>
      <th class = "subtitle-text">Artist</th>
      <th class = "subtitle-text">Album</th>
      <th class = "hidden" id = "song-id">ID</th>
    </tr>
  </thead>
  <tbody id = "search-results-body">
    <tr>
      <td>Track name </td>
      <td>Artist name </td>
      <td>Album name </td>
      <td class = "hidden">Track ID 1</td>
    </tr>
    <tr>
      <td>Track name </td>
      <td>Artist name </td>
      <td>Album name </td>
      <td class = "hidden">Track ID 2</td>
    </tr>
    <tr>
      <td>Track name </td>
      <td>Artist name </td>
      <td>Album name </td>
      <td class = "hidden">Track ID 3</td>
    </tr>
  </tbody>
</table>

Это оно. Оказывается, я также забыл закрыть кавычки, что меня действительно сбило с толку. Большое спасибо!!

— 10.09.2018 13:05

Рад, что смог помочь братану, если ответ - то, что вы ищете, отметьте его как правильный ответ для будущих читателей.

— 11.09.2018 13:28

10.09.2018 12:44

Из документации jQuery о .closest():

Given a jQuery object that represents a set of DOM elements, the .closest() method searches through these elements and their ancestors in the DOM tree and constructs a new jQuery object from the matching elements.

Таким образом, вы никогда не получите элемент tr внутри своей таблицы, потому что вы, по сути, говорите ему искать родительский tr вашей таблицы, которого, очевидно, не существует.

10.09.2018 12:56

Попробуй это

$(document).on('click','#results-table tr',function(){
    	var allTd=$(this).find('td');
        
        $.each(allTd,function(i,td){
        debugger;
        	if ($(td).hasClass('hidden'))
            {
            	alert($(td)[0].innerText);
                console.info($(td)[0].innerText)
            }
        });
    });

.hidden {

  display:none;
  
}

<script src = "https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table class = "song-table" id  = "results-table" border = "1">
                    <thead>
                        <tr>
                            <th class = "subtitle-text">Track</th>
                            <th class = "subtitle-text">Artist</th>
                            <th class = "subtitle-text">Album</th>
                            <th class = "hidden" id = "song-id">ID</th>
                        </tr>
                    </thead>
                    <tbody id = "search-results-body">
                      <tr>
              <td>Track name </td>
              <td>Artist name </td>
              <td>Album name </td>
              <td class = "hidden">Track ID 1</td>
            </tr>
            <tr>
              <td>Track name </td>
              <td>Artist name </td>
              <td>Album name </td>
              <td class = "hidden">Track ID 2</td>
            </tr>
            <tr>
              <td>Track name </td>
              <td>Artist name </td>
              <td>Album name </td>
              <td class = "hidden">Track ID 3</td>
            </tr>
                    </tbody>
                </table>

10.09.2018 13:14

Вы можете найти по имени класса в строке таблицы щелчков, как это

<!DOCTYPE html>
<html>
<head>
<script src = "https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
    $(document).on('click', 'tbody tr', function(){
        var id = $(this).find('.hidden').text();
        alert(id)
    })
});
</script>
<style>
.hidden {
  display:none;
}
</style>
</head>
<body>
<table class = "song-table" border = "1" id = "results-table">
  <thead>
    <tr>
      <th class = "subtitle-text">Track</th>
      <th class = "subtitle-text">Artist</th>
      <th class = "subtitle-text">Album</th>
      <th class = "hidden" id = "song-id">ID</th>
    </tr>
  </thead>
  <tbody id = "search-results-body">
    <tr>
      <td>Track name </td>
      <td>Artist name </td>
      <td>Album name </td>
      <td class = "hidden">Track ID 1</td>
    </tr>
    <tr>
      <td>Track name </td>
      <td>Artist name </td>
      <td>Album name </td>
      <td class = "hidden">Track ID 2</td>
    </tr>
    <tr>
      <td>Track name </td>
      <td>Artist name </td>
      <td>Album name </td>
      <td class = "hidden">Track ID 3</td>
    </tr>
  </tbody>
</table>
</body>
</html>

10.09.2018 13:23

Другие вопросы по теме

Скрипт, который находит слово из массива и добавляет к нему всплывающую подсказку

Запрос InfluxDb для выбора диапазона ключей тегов

Заполните выделение в html из массива, отправленного nodejs

Кнопка автоматического нажатия, если отображение стиля заблокировано

Браузер зависает при отправке запроса Ajax в цикле

JQuery fadeIn и slideUp с задержкой

Как предотвратить перерезание струн у знака #?

Открытие приложения / браузера в Windows при нажатии на ссылку

Обновить HTML-контент после щелчка

"else" не работает с моим кодом JQuery с помощью slideToggle

Возврат скрытого значения <td> с помощью jQuery

Ответы 5

Другие вопросы по теме

Похожие вопросы