遍历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();
});             

我想要什么要做的就是显示一个警报或厚盒，显示所有隐藏列的标题名称和单元格值：

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/