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/

在html表中遍历隐藏的cols

1 个答案: