JavaScript 搜索功能未正确显示结果答案

【问题标题】：JavaScript search function not showing the results properlyJavaScript 搜索功能未正确显示结果
【发布时间】：2018-08-27 19:23:32
【问题描述】：

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

【问题讨论】：

如果它不能正常工作，请提供您希望它如何工作的信息。预期的最终结果是什么？
为什么你在input 元素中有这个 - onkeyup="myFunction()" 因为你没有这个功能并且你使用 jQuery 来了解keyup 事件
由于没有指定目标元素，它将始终查找第一个匹配元素，这意味着在这种情况下，您必须输入准确的搜索字符串以匹配所需的搜索。如果不指定元素，则无法在搜索中定位所需的元素。
请检查给定的小提琴链接。表 tr 具有 colspan=1 和 rowspan = 3 ，您在其中搜索结果数据，它将仅显示 tr 的顶行而不是其他两个
您需要按要搜索的列指定

标签： javascript jquery html html-table

【解决方案1】：

jquery 过滤器的函数参数需要返回值（布尔值）作为过滤条件。但你没有返回任何东西。检查此链接http://api.jquery.com/filter/#filter-function

【讨论】：

【解决方案2】：

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

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

注意

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

【讨论】：