0

我有一张桌子

<table id="report">
    <thead>
        <tr>
            <th class="first_name">First Name</th>
            <th class="last_name">Last Name</th>
            <th class="email">Email</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>Larry</td>
            <td>Hughes</td>
            <td>larry@gmail.com</td>
        </tr>
        <tr>
            <td>Mike</td>
            <td>Tyson</td>
            <td>mike@gmail.com</td>
        </tr>
    </tbody>
</table>

我想根据传递给函数的标题选择所有行。这就是我的意思

function passTh(nm){
   // for eg: nm will contain the class of the th "first_name"
   var th = "." + nm;
   // get index of th
   // i have to select all cells in this column along with the header and hide them
}
4

1 回答 1

2

像这样？

$(function(){
    var $table = $('#report');
    function passTh(nm) {
        var th = "." + nm;
        var idx = $(th).index();
        $table.find('tr :nth-child(' + (idx+1) + ')').hide();
    }
    passTh('first_name');
});

演示

由于您想隐藏 th 和 tr ，因此您可以选择它们，nth-child它们基于以 1 为基数的索引获取元素。

更新

由于您有一个大表，您可以在 css 的帮助下使其更有效。

你的HTML：

<table id="report">
    <thead>
        <tr>
            <th class="first_name">First Name</th>
            <th class="last_name">Last Name</th>
            <th class="email">Email</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td class="first_name">Larry</td>
            <td class="last_name">Hughes</td>
            <td class="email">larry@gmail.com</td>
        </tr>
        <tr>
            <td class="first_name">Mike</td>
            <td class="last_name">Tyson</td>
            <td class="email">mike@gmail.com</td>
        </tr>
    </tbody>
</table>

添加这个CSS：

#report.first_name_hide .first_name,
#report.last_name_hide .last_name,
#report.email_hide .email
{
    display:none;
}

只是这个 JS 只是将一个类添加到表中：

$(function () {
    var $table = $('#report');
   function passTh(nm) {
        var hide = nm + "_hide";
        $table.addClass(hide);
    }
    passTh('first_name');
});

演示

于 2013-10-19T01:05:25.647 回答