如何从表头（th）中获取相应的表列（td）？ [英] How can I get the corresponding table column (td) from a table header (th)?

问题描述

我想获取表头的整个列。

I want to get the entire column of a table header.

例如，我想选择表头Address来隐藏地址列，并且选择电话标题以显示对应列。

For example, I want to select the table header "Address" to hide the address column, and select the "Phone" header to show the correspondent column.

<table>
<thead> 
    <tr>
        <th id="name">Name</th>
        <th id="address">Address</th>
        <th id="address" class='hidden'>Address</th>
    </tr>
</thead> 
<tbody>
    <tr>
        <td>Freddy</td>
        <td>Nightmare Street</td>
        <td class='hidden'>123</td>
    </tr>
    <tr>
        <td>Luis</td>
        <td>Lost Street</td>
        <td class='hidden'>3456</td>
    </tr>
</tbody>

我想做类似的事情 http://www.google.com/finance?q=apl （参见相关内容）公司表）（点击添加或删除列链接）

I want to do something like http://www.google.com/finance?q=apl (see the related companies table) (click the "add or remove columns" link)

推荐答案

这样的事情会工作 -

Something like this would work -

$('th').click(function() {
    var index = $(this).index()+1;
    $('table td:nth-child(' + index + '),table th:nth-child(' + index + ')').hide()
});

如果单击标题，上面的代码将隐藏相关列，逻辑可以更改为虽然符合你的要求。

The code above will hide the relevant column if you click on the header, the logic could be changed to suit your requirements though.

演示 - http：// jsfiddle。 net / LUDWQ /

这篇关于如何从表头（th）中获取相应的表列（td）？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！