遍历html表中的隐藏列

Question

也许这个问题太简单了……我对 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

如果这样做更容易，我可以将所有隐藏列分组在表格的开头（左侧）。

提前致谢。

Answer 1

试试这个

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/