Извлечение td скрытой ячейки с помощью jQuery

#jquery #hidden #html-table

#jquery #скрытая #html-таблица

Вопрос:

У меня есть следующая таблица:

 <table id="mytable">
<tr> 
<th class="hidden">id</th> 
<th>name</th> 
</tr> 
<tr> 
<td class="hidden">87</td> 
<td>Isle of Palms</td> 
</tr> 
</table>

и затем этот код jQuery для скрытия столбца id:

 <script> 
$(function() {
$('.hidden').hide();
});
</script>

Мне нужно получить скрытое значение ячейки id при нажатии на любую строку, но я не могу найти правильный селектор. Будем признательны за любую помощь. Спасибо.

Ответ №1:

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

 $('tr').click(function () {

     var id = $(this).find('td.hidden').html();
});

Обновить

 $('tr').click(function () {

     var id = $(this).find('td.hidden:first').html();
});

Если у вас много столбцов и вы хотите выбрать первый из них, вы можете использовать :first . Помните, это добавит событие click для всех ваших строк в вашей таблице. Я полагаю, вас интересуют только строки внутри вашего tbody, которых нет в вашем примере. Поэтому я бы сделал это вместо:

 <table id="mytable">
  <thead>  
    <tr> 
      <th class="hidden">id</th> 
      <th>name</th> 
    </tr>
  </thead>
  <tbody> 
    <tr> 
      <td class="hidden">87</td> 
      <td>Isle of Palms</td> 
    </tr> 
  </tbody>
</table>

а затем установите события щелчка для строк tbody

 $('tbody tr').click(function () {

     var id = $(this).find('td.hidden:first').html();
});

Надеюсь, это поможет!

1. Ну … на самом деле ваш код работает для примера, который я публикую. Извините за мой последний комментарий. Но это не работает для моей реальной проблемы. Я использую таблицу с 15 столбцами, 7 из которых скрыты, и мне нужно получить первый скрытый столбец, это идентификатор. С наилучшими пожеланиями.

2. Я сделал. Спасибо за проявленный интерес. Оба ваших решения работают для кода, который я опубликовал. Но я получаю null в реальном коде при каждой строке, на которую я нажимаю. Код в основном тот же… просто больше столбцов. Странно. В любом случае спасибо 😉

3. Не могли бы вы скопировать / вставить реальную таблицу?

4. Не требуется… это работает! В реальной вещи у класса было другое имя. Я думал, что hidden — это какое-то «зарезервированное слово». Большое вам спасибо!!! Я довольно новичок в jQuery, и я боролся в течение нескольких часов.

5. скрытый — это зарезервированное слово, когда дело доходит до ввода => тип=»скрытый». В любом случае, если мой ответ был правильным, пожалуйста, проверьте его как этот.

Ответ №2:

Я собираюсь предположить, что вы мне .text() из <td class="hidden">87</td> или 87

Вы можете зарегистрировать обработчик щелчков на <tr/> , а затем найти свой <td/>

 $("tr").click(function(){
    var $idCell = $(this).find("td.hidden");
    if($idCell.length == 1)
    {
      var id = $idCell.text();
    }
});

Редактировать

Немного лучшим вариантом может быть использование .filter() , чтобы вы регистрировали только обработчики событий, у которых есть дочерний элемент <td class="hidden"/>

 $("tr").filter(function(){
    return $(this).children("td.hidden").length == 1;
}).click(function(){
    alert($(this).find("td.hidden").text());
});

1. Это сработало бы! Или он мог бы на самом деле написать thead и tbody, которые являются стандартными для W3C. А затем установите событие click следующим образом => $(‘tbody tr’).click(функция() { … });

2. Спасибо, но это не работает. Могу ли я спросить вас, что означает .length == 1 ? Извините, все еще учусь 😉

3. Это просто способ убедиться, что в возвращаемом наборе результатов есть только один скрытый td. Если у вас возникли проблемы, опубликуйте более надежный пример на jsfiddle. подключитесь , чтобы увидеть, в чем ваша проблема.