Функция поиска JavaScript не показывает результаты должным образом

Question

Таблица HTML имеет атрибуты colspan и rowspan, где функция поиска Javascript не работает должным образом, и в случае ROWSPAN для нее отображается только одна строка, равная 2 или 3.

Это HTML-код

<input type="text" id="myInput" onkeyup="myFunction()" class="form-control" 
    placeholder="Search here..." style="width: 100%; padding: 10px 10px">
<br>
<table class="table" style="text-align: left; width: 100%;"
    border="1" cellpadding="2" cellspacing="2">
    <thead>
        <tr class="thead header">
            <th style="font-weight: bold; text-align: center;">Sl.No</th>
            <th style="font-weight: bold; text-align: center; width: 
            45%;">Heading
                1
            </th>
            <th style="font-weight: bold; text-align: center;">Heading
                2
            </th>
            <th style="font-weight: bold; text-align: center;">Heading
                3
            </th>
        </tr>
    </thead>
    <tbody id="myTable">
        <tr>
            <td colspan="1" rowspan="3">1</td>
            <td colspan="1" rowspan="3">HEAD 1</td>
            <td style="text-align: left;">some content1</td>
            <td style="text-align: left;">some content1.1</td>
        </tr>
        <tr>
            <td style="text-align: left;">some content2</td>
            <td style="text-align: left;">some content2.1</td>
        </tr>
        <tr>
            <td style="text-align: left;">some content3</td>
            <td style="text-align: left;">some content3.1</td>
        </tr>
        <tr>
            <td colspan="1" rowspan="2">2</td>
            <td colspan="1" rowspan="2">HEAD 2</td>
            <td>some content4</td>
            <td>some content4.1</td>
        </tr>
        <tr>
            <td>some content5</td>
            <td>some content5.1</td>
        </tr>
    </tbody>
</table> 

Это код JavaScript для функции поиска

$(document).ready(function() {

    $("#myInput").on("keyup", function() {

        var value = $(this).val().toLowerCase();

        $("#myTable tr").filter(function() {

            $(this).toggle($(this).text().toLowerCase().indexOf(value) > -1)

        });

    });

});

JSFiddle link

Answer 1

Прежде всего, ваша структура таблицы неверна.Следовательно, код $("#myTable tr") возвращает массив 5 вместо 2.

Более того, вы должны использовать $("#myTable > tr"), чтобы получить непосредственные дочерние элементы и из этого отфильтровать нежелательные строки.

Примечание

таблица не может иметь tr и td смежных элементов.td всегда должен быть заключен в tr.Обновите синтаксис таблицы и обновите вопрос, чтобы получить лучший ответ.

Answer 2

Аргумент функции фильтра jquery требует возвращаемого значения (Boolean) для условия фильтрации. но ты ничего не вернул. проверить эту ссылку http://api.jquery.com/filter/#filter-function