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 に答える