jQuery regexp поиск в таблице не во всех столбцах, только в первом столбце

0

Я, наконец, получил это, чтобы работать, и я могу фильтровать, ища по имени. Однако я не могу его фильтровать, ища значение в любом столбце. Например, я хочу иметь возможность вводить "gmail" и показывать только те записи, которые имеют gmail в любой из ячеек таблицы в этой строке. Даже если я добавляю class="name" для каждого td, они не включены в поиск.

HTML:

<input type="search" id="search" placeholder="Search table by name">

    <table caption="Data type 1" sortable id="name_table"><col width="20%"><col width="20%"><col width="15%"><col width="20%"><col width="25%">
        <thead>
            <tr>
                <th>Name</th><th>Address</th><th>Job No.</th><th class="no-sort">Phone</th><th>Email</th>
            </tr>
        </thead>
        <tfoot>
            <tr>
                <td colspan="5">End of records</td>
            </tr>
        </tfoot>
        <tbody>
            <tr>
                <td class="name">John Smith</td><td>123 Fake Street</td><td>Job 117</td><td>0405788996</td><td>[email protected]</td>
            </tr>
            <tr>
                <td class="name">Jane Smyth</td><td>1234 False Road</td><td>Job 118</td><td>0405788555</td><td>[email protected]</td>
            </tr>
            <tr>
                <td class="name">Alexey Fadeev</td><td>12 Dubio Lane</td><td>Job 119</td><td>0405788966</td><td>[email protected]</td>
            </tr>

        </tbody>
    </table>

Javascript:

<script>
    // Table Search
    $('#search').keyup(function() {
      var regex = new RegExp($('#search').val(), "i");
      var rows = $('table tbody tr');
      rows.each(function (index) {
        name = $(this).children(".name").html()
        if (name.search(regex) != -1) {
          $(this).show();
        } else {
          $(this).hide();
        }
      });
    });
</script>

Мне бы хотелось добавить класс в каждый столбец или ячейку внутри <tbody> я хочу включить в поиск. Какие-нибудь советы?

Теги:
html-table
search

2 ответа

0
Лучший ответ

При использовании метода .html() он возвращает HTML первого элемента в стеке. Могу ли я предложить вам изменить эту строку:

name = $(this).children(".name").html();

к этому:

name = $(this).text();
  • 0
    Ах. Это имеет смысл. Теперь мне интересно, как я это пропустил.
1

вы не включаете весь текст в tr

$(this).html(); or $(this).text();

вместо

name = $(this).children(".name").html();
  • 0
    Спасибо за ваш ответ.

Ещё вопросы

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