Question

我有一张桌子

<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
}

Answer 1

喜欢这个吗？

$(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');
});

<强> Demo

由于你想要隐藏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');
});

<强> Demo

根据标题选择行

1 个答案: