为什么我的“搜索”功能仅对Boostrap表的某些列有效？

时间：2019-02-18 10:17:42

标签： javascript jquery search bootstrap-4

我已经设置了一个js函数，让我可以在Boostrap表中进行搜索，但是该函数仅适用于其两列。

我是Java的新手，因此即使我可以选择要搜索的列，也无法全部选择。我还应该强调一下，此功能是我最初在Boostrap表中使用的功能，我只需要搜索一些列即可。

这是我的HTML：

<section class="main">
    <table id="maintable">
        <thead class="maintable-header">
            <tr>                                           
                <th scope="col" style="width: 5%" class="number"></th>
                <th scope="col" style="width: 17.5%" class="role">Role</th>
                <th scope="col" style="width: 35%" class="project">Project</th>
                <th scope="col" style="width: 35%" class="credits">Credits</th>
                <th scope="col" style="width: 7.5%" class="year">Year</th>
            </tr>
        </thead>



        <tbody id="mainTableBody">

<!-- ########################### ROW 4 ########################### -->
                <td style="padding-left: 0.5%;">4</td>
                <td>Project Management</td>
                <td>Fragile?</td>
                <td>Pentagram Stiftung</td>
                <td>2013</td>
            </tr>
            <tr class="projectinfo" id="projectinfo4">
                <td></td>
                <td class="align-text-top">Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium.</td>
                <td>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo.</td>
                <td></td>
                <td></td>
            </tr>

<!-- ########################### ROW 5 ########################### -->
            <tr class="rowheader" id="rowheader5">         
                <td style="padding-left: 0.5%;">5</td>
                <td>Project Management</td>
                <td>Fragile?</td>
                <td>Pentagram Stiftung</td>
                <td>2013</td>
            </tr>
            <tr class="projectinfo" id="projectinfo5">
                <td></td>
                <td class="align-text-top">Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium.</td>
                <td>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo.</td>
                <td></td>
                <td></td>
            </tr>

<!-- ########################### ROW 6 ########################### -->

            <tr class="rowheader" id="rowheader6">         
                <td style="padding-left: 0.5%;">6</td>
                <td>Curating</td>
                <td>The Book Affair</td>
                <td>Automatic Books</td>
                <td>2009</td>
            </tr>
            <tr class="projectinfo" id="projectinfo6" style="height: 50px;">
                <td></td>
                <td class="align-text-top">Lorem ipsum dolor sit amet consectetur adipisicing elit.</td>
                <td>Lorem ipsum dolor sit amet consectetur adipisicing elit. Reprehenderit id odio minima eos fugiat a aut veniam quasi in, enim quis, iure adipisci ratione, et atque velit distinctio consequuntur nisi!</td>
                <td></td>
                <td></td>
            </tr>

            </tbody>
     </table>
</section>

这是我的功能：

function searchFunction() {
  var input, filter, ul, li, a, i;
  input = document.getElementById("searchInput");
  filter = input.value.toUpperCase();
  table = document.getElementById("mainTableBody");
  entries = table.getElementsByTagName("tr");

  for (i = 0; i < entries.length; i++) {
    a = entries[i].getElementsByTagName("td")[0];
    b = entries[i].getElementsByTagName("td")[2];
    //console.log(a, b);
    if (a.innerHTML.toUpperCase().indexOf(filter) > -1 || 
b.innerHTML.toUpperCase().indexOf(filter) > -1) {
      entries[i].style.display = "";
    } else {
      entries[i].style.display = "none";

    }
  }
}

我想实现的是搜索所有列而不排除其中任何列的可能性。

非常感谢您的帮助！

1 个答案:

答案 0 :(得分：0)

  

我想实现的是搜索所有列而不排除其中任何列的可能性。

只需更改搜索功能即可搜索所有td元素，而不是指定两个a和b变量。

在这里，我使用Spread syntax和Array.some()方法来缩短代码。

function searchFunction() {
    const input = document.getElementById("searchInput"),
        filter = input.value.toUpperCase(),
        table = document.getElementById("mainTableBody"),
        entries = table.getElementsByTagName("tr");

    // Loop all tr elements
    [...entries].forEach(tr => {
        // Loop all td elements, checking if innerHTML contains #searchInput value
        const containsSearch = [...tr.getElementsByTagName("td")].some(td =>
            td.innerHTML.toUpperCase().includes(filter)
        );

        tr.style.display = containsSearch ? "table-row" : "none";
    });
}
<input type="text" id="searchInput" onkeyup="searchFunction()" value="Search" onfocus="if(this.value==this.defaultValue)this.value='';" onblur="if(this.value=='')this.value=this.defaultValue; this.style.color ='rgba(0,0,0,0.5)';">

<section class="main">
    <table id="maintable">
        <thead class="maintable-header">
            <tr>
                <th scope="col" style="width: 5%" class="number"></th>
                <th scope="col" style="width: 17.5%" class="role">Role</th>
                <th scope="col" style="width: 35%" class="project">Project</th>
                <th scope="col" style="width: 35%" class="credits">Credits</th>
                <th scope="col" style="width: 7.5%" class="year">Year</th>
            </tr>
        </thead>

        <tbody id="mainTableBody">
            <tr class="rowheader" id="rowheader5">
                <!-- ########################### ROW 5 ########################### -->
                <td style="padding-left: 0.5%;">5</td>
                <td>Project Management</td>
                <td>Fragile?</td>
                <td>Pentagram Stiftung</td>
                <td>2013</td>
            </tr>
            <tr class="projectinfo" id="projectinfo5">
                <td></td>
                <td class="align-text-top">Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo.</td>
                <td>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Sed ut perspiciatis unde omnis
                    iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Sed ut perspiciatis unde omnis iste natus error sit voluptatem
                    accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo.</td>
                <td></td>
                <td></td>
            </tr>

            <tr class="rowheader" id="rowheader6">
                <!-- ########################### ROW 6 ########################### -->
                <td style="padding-left: 0.5%;">6</td>
                <td>Curating</td>
                <td>The Book Affair</td>
                <td>Automatic Books</td>
                <td>2009</td>
            </tr>
            <tr class="projectinfo" id="projectinfo6" style="height: 50px;">
                <td></td>
                <td class="align-text-top">Lorem ipsum dolor sit amet consectetur adipisicing elit. Reprehenderit id odio minima eos fugiat a aut veniam quasi in, enim quis, iure adipisci ratione, et atque velit distinctio consequuntur nisi!</td>
                <td>Lorem ipsum dolor sit amet consectetur adipisicing elit. Reprehenderit id odio minima eos fugiat a aut veniam quasi in, enim quis, iure adipisci ratione, et atque velit distinctio consequuntur nisi! Lorem ipsum dolor sit amet consectetur adipisicing
                    elit. Reprehenderit id odio minima eos fugiat a aut veniam quasi in, enim quis, iure adipisci ratione, et atque velit distinctio consequuntur nisi! Lorem ipsum dolor sit amet consectetur adipisicing elit. Reprehenderit id odio minima eos fugiat
                    a aut veniam quasi in, enim quis, iure adipisci ratione, et atque velit distinctio consequuntur nisi!</td>
                <td></td>
                <td></td>
            </tr>

            <tr class="rowheader" id="rowheader7">
                <!-- ########################### ROW 7 ########################### -->
                <td style="padding-left: 0.5%;">7</td>
                <td>Project Management</td>
                <td>Fragile?</td>
                <td>Pentagram Stiftung</td>
                <td>2013</td>
            </tr>
            <tr class="projectinfo" id="projectinfo7">
                <td></td>
                <td class="align-text-top">Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo.</td>
                <td>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Sed ut perspiciatis unde omnis
                    iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Sed ut perspiciatis unde omnis iste natus error sit voluptatem
                    accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo.</td>
                <td></td>
                <td></td>
            </tr>
        </tbody>
    </table>
</section>

相关问题
最新问题