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

jquery过滤器的function参数需要返回值（布尔值）来过滤条件。但是你什么也没退检查此链接http://api.jquery.com/filter/#filter-function

Answer 2

首先，您的表结构错误。因此，代码$("#myTable tr")返回5而不是2的数组。

此外，您应该使用$("#myTable > tr")获取直接子级，并从中过滤掉不需要的行。

注意

一个表不能有tr和td个相邻元素。 td应该始终由tr包裹。请更新表语法并更新问题以提供更好的答案。

JavaScript搜索功能无法正确显示结果

2 个答案: