Выберите строки на основе заголовка

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>[email protected]</td>
        </tr>
        <tr>
            <td>Mike</td>
            <td>Tyson</td>
            <td>[email protected]</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
}
  • 0
    Вы имеете в виду «выбрать ячейки в этом столбце»?
  • 0
    да, я имел в виду это ... извините
Теги:
jquery-selectors

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">[email protected]</td>
        </tr>
        <tr>
            <td class="first_name">Mike</td>
            <td class="last_name">Tyson</td>
            <td class="email">[email protected]</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');
});

демонстрация

  • 0
    отлично .. можешь объяснить код. Также, в большой таблице, find () может быть медленным? Как насчет $ ('table td: nth-child (' + index + 1 + ')'). Hide () или мне следует использовать предложенный вами подход?
  • 1
    @ user1089173 поиск всегда будет быстрее, чем использование нескольких вложенных селекторов. Одна вещь, которую вы можете сделать, чтобы быстро назначить один и тот же класс всем tr. начать и просто скрыть их с этим выбором. Это будет намного быстрее.
Показать ещё 17 комментариев

Ещё вопросы

Сообщество Overcoder
Наверх
Меню