Обход скрытых столбцов в HTML-таблице - PullRequest
Новая
       26

Обход скрытых столбцов в HTML-таблице

1 голос
/ 11 апреля 2011

Может быть, этот вопрос так прост ... Я довольно хорошо понимаю html, css, dom и javascript, но мне очень тяжело, когда я пытаюсь заставить jQuery работать на меня. Допустим, у меня есть следующая таблица из 4 столбцов со скрытыми столбцами 1 и 3: 

<table id="mytable">
  <thead>  
    <tr> 
      <th class="hidden">Column1</th> 
      <th>Column2</th>    
      <th class="hidden">Column3</th> 
      <th>Column4</th>
    </tr>
  </thead>
  <tbody> 
    <tr> 
      <td class="hidden">Value1</td> 
      <td>Isle of Palms</td>   
      <td class="hidden">Value3</td>  
      <td>Value4</td> 
    </tr> 
  </tbody>
</table>

Затем я использую следующий код, чтобы скрыть скрытые столбцы классов: 

$(function() { 
    $('.hidden').hide();
});

Вчера некоторые из вас рассказали мне, как получить содержимое первого столбца, используя: 

$(function() { 
    $(this).find('td.hidden:first').html();
});

Что я хочу сделать, это показать предупреждение или Thickbox, показывающие имя заголовка и значение ячейки для всех скрытых столбцов: 

Column1 = Value1
Column3 = Value3

Если бы это было проще сделать, я мог бы сгруппировать все скрытые столбцы в начале (слева) таблицы.

Заранее спасибо.

1 Ответ

2 голосов
/ 11 апреля 2011

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

var mytable = $('#mytable');

$('#mytable > tbody').delegate('tr', 'click', function (e) {

    trToShow = $(this);

    var keyValueInfo = mytable.find('th.hidden').map(function () {

        // for each th.hidden element, get the corresponding "key = value" string

        var i = $(this).index(); // get the index of the th element

        // get the td element with the same index as the above th, and get the text inside it
        var value = trToShow.find('td.hidden').filter(function () {
            return $(this).index() === i;
        }).text();

        // The above could also be done as (Read documentation of :eq selector)
        // var value = trToShow.find('td:eq(' + i + ')').text();

        // get the text inside this th element, which would be our key
        var key = $(this).text();

        // return the "key = value" string wrapped up in a div element
        return '<div>' + key + ' = ' + value + '</div>';

    }).toArray().join('');

});

// Show a dialog with the above content inside it
show_dialog_with_stuff(keyValueInfo);

Подробнее на index

Я не проверял это, но если таковые имеются, должны быть только незначительные глупые ошибки. Проверено здесь http://jsfiddle.net/mb6Gd/

...