堆棧內存溢出
  簡體   English   中英

使用javascript / jQuery和“搜索”欄的內容，在單擊按鈕時搜索表並返回正確的表行

[英]Search table and return correct table rows on button click using javascript/jQuery and the contents of the 'search' bar

 原文  2016-09-06 16:55:02  6   3    javascript/ jquery/ html

問題描述

基本上，我目前有一個使用.keyup（）函數工作的搜索欄，並且返回正確的行，並在用戶輸入值時隱藏其他行。 我正在嘗試學習如何執行此操作（使用.click（），但我對jQuery / javascript的了解不是很深）。 有人可以幫我適應當前的功能，以便搜索欄的內容僅在單擊搜索按鈕時才用於搜索表，而不是在用戶鍵入時使用。 非常感謝。

HTML： 

        <h2>Customer Data</h2>

        <p>Below shows all the relevant customer data, rows can be edited, added, removed and moved up and down in the table.</p> 
        <div id="table" class="table-editable"  style="width:1000px; text-align: left;">
                <span class="table-add glyphicon glyphicon-plus"></span>
                <table class="table">
            <thread>
                <tr>
                    <th width="300">Customer Name</th>
                    <th width="250">Postcode</th>
                <th width="200">Telephone No</th>
                    <th width="150">Remove</th>
                    <th width="100">Adjust Row</th>
                </tr>
            </thread>
            <tbody>
                <tr>
                    <td width="300"><div contenteditable>Adam Greenwood</div>
                    <td width="250"><div contenteditable>GU17 0DL</div>
                <td width="200"><div contenteditable>01252445567</div>
                <td width="150">
                    <span class="table-remove glyphicon glyphicon-remove"></span>
                </td>
                <td width="100>
                    <span class="table-up glyphicon glyphicon-arrow-up"></span>
                    <span class="table-down glyphicon glyphicon-arrow-down"></span>
                </td>
                </tr>
            <tr>
                    <td width="300"><div contenteditable>Sam Test</div>
                    <td width="250"><div contenteditable>GU47 7GR</div>
                <td width="200"><div contenteditable>01276122047</div>
                <td width="150">
                    <span class="table-remove glyphicon glyphicon-remove"></span>
                </td>
                <td width="100">
                    <span class="table-up glyphicon glyphicon-arrow-up"></span>
                    <span class="table-down glyphicon glyphicon-arrow-down"></span>
                </td>
                </tr>
            <tr>
                    <td width="300"><div contenteditable>Mark Colin</div>
                    <td width="250"><div contenteditable>YA32 3DM</div>
                <td width="200"><div contenteditable>44+7449929147</div>
                <td width="150">
                    <span class="table-remove glyphicon glyphicon-remove"></span>
                </td>
                <td width="100">
                    <span class="table-up glyphicon glyphicon-arrow-up"></span>
                    <span class="table-down glyphicon glyphicon-arrow-down"></span>
                </td>
                </tr>
            <tr>
                    <td width="300"><div contenteditable>Frank Wright</div>
                    <td width="250"><div contenteditable>SF65 7YY</div>
                <td width="200"><div contenteditable>00866451340</div>
                <td width="150">
                    <span class="table-remove glyphicon glyphicon-remove"></span>
                </td>
                <td width="100">
                    <span class="table-up glyphicon glyphicon-arrow-up"></span>
                    <span class="table-down glyphicon glyphicon-arrow-down"></span>
                </td>
                </tr>
            <tr>
                    <td width="300"><div contenteditable>Arnold Carrol</div>
                    <td width="250"><div contenteditable>LE22 2WQ</div>
                <td width="200"><div contenteditable>05429552095</div>
                <td width="150">
                    <span class="table-remove glyphicon glyphicon-remove"></span>
                </td>
                <td width="100">
                    <span class="table-up glyphicon glyphicon-arrow-up"></span>
                    <span class="table-down glyphicon glyphicon-arrow-down"></span>
                </td>
                </tr>
            <tr>
                    <td width="300"><div contenteditable>Thomas Gallagher</div>
                    <td width="250"><div contenteditable>YL66 7FF</div>
                <td width="200"><div contenteditable>94232520682</div>
                <td width="150">
                    <span class="table-remove glyphicon glyphicon-remove"></span>
                </td>
                <td width="100">
                    <span class="table-up glyphicon glyphicon-arrow-up"></span>
                    <span class="table-down glyphicon glyphicon-arrow-down"></span>
                </td>
                </tr>
            <tr>
                    <td width="300"><div contenteditable>Stephen Major</div>
                    <td width="250"><div contenteditable>SA12 6TG</div>
                <td width="200"><div contenteditable>54295650429</div>
                <td width="150">
                    <span class="table-remove glyphicon glyphicon-remove"></span>
                </td>
                <td width="100">
                    <span class="table-up glyphicon glyphicon-arrow-up"></span>
                    <span class="table-down glyphicon glyphicon-arrow-down"></span>
                </td>
                </tr>
            <tr>
                    <td width="300"><div contenteditable>Neil Reynolds</div>
                    <td width="250"><div contenteditable>MU70 6XC</div>
                <td width="200"><div contenteditable>40768991327</div>
                <td width="150">
                    <span class="table-remove glyphicon glyphicon-remove"></span>
                </td>
                <td width="100">
                    <span class="table-up glyphicon glyphicon-arrow-up"></span>
                    <span class="table-down glyphicon glyphicon-arrow-down"></span>
                </td>
                </tr>
            <tr>
                    <td width="300"><div contenteditable>Jeff Reinbold</div>
                    <td width="250"><div contenteditable>RG10 7HM</div>
                <td width="200"><div contenteditable>01865439</div>
                <td width="150">
                    <span class="table-remove glyphicon glyphicon-remove"></span>
                </td>
                <td width="100">
                    <span class="table-up glyphicon glyphicon-arrow-up"></span>
                    <span class="table-down glyphicon glyphicon-arrow-down"></span>
                </td>
                </tr>
                <!-- This is our clonable table line -->
                <tr class="hide">
                    <td width="300"><div contenteditable>Empty</div>
                    <td width="250"><div contenteditable>Empty</div>
                <td width="200"><div contenteditable>Empty</div>
                    <td width="150"><span class="table-remove glyphicon glyphicon-remove"></span></td>
                    <td width="100"><span class="table-up glyphicon glyphicon-arrow-up"></span>
                    <span class="table-down glyphicon glyphicon-arrow-down"></span>
                    </td>
                </tr>
            </tbody>
                </table>
            <input type="text" id="search" placeholder="Type to search..." />
            <br />
            <br />
            <button>Search</button>
        </div>

搜索功能： 

<script>
        $("#search").keyup(function(){
                _this = this;

                $.each($("#table tbody tr"), function() {

                    if($(this).text().toLowerCase().indexOf($(_this).val().toLowerCase()) === -1)
                        $(this).hide();
                    else
                        $(this).show();                
                });
            }); 
        </script>

3 個解決方案

解決方案1
 1  2016-09-06 17:03:36

首先，在您的搜索按鈕中添加一個ID： 

<button id="search-button">Search</button>

然后將click事件添加到您的jQuery代碼中。

嘗試這個 ： 

  $("#search-button").click(function(){ $.each($("#table tbody tr"), function() { if($(this).text().toLowerCase().indexOf($('#search').val().toLowerCase()) === -1) $(this).hide(); else $(this).show(); }); }); 
 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> <h2>Customer Data</h2> <p>Below shows all the relevant customer data, rows can be edited, added, removed and moved up and down in the table.</p> <div id="table" class="table-editable" style="width:1000px; text-align: left;"> <span class="table-add glyphicon glyphicon-plus"></span> <table class="table"> <thread> <tr> <th width="300">Customer Name</th> <th width="250">Postcode</th> <th width="200">Telephone No</th> <th width="150">Remove</th> <th width="100">Adjust Row</th> </tr> </thread> <tbody> <tr> <td width="300"><div contenteditable>Adam Greenwood</div> <td width="250"><div contenteditable>GU17 0DL</div> <td width="200"><div contenteditable>01252445567</div> <td width="150"> <span class="table-remove glyphicon glyphicon-remove"></span> </td> <td width="100"> <span class="table-up glyphicon glyphicon-arrow-up"></span> <span class="table-down glyphicon glyphicon-arrow-down"></span> </td> </tr> <tr> <td width="300"><div contenteditable>Sam Test</div> <td width="250"><div contenteditable>GU47 7GR</div> <td width="200"><div contenteditable>01276122047</div> <td width="150"> <span class="table-remove glyphicon glyphicon-remove"></span> </td> <td width="100"> <span class="table-up glyphicon glyphicon-arrow-up"></span> <span class="table-down glyphicon glyphicon-arrow-down"></span> </td> </tr> <tr> <td width="300"><div contenteditable>Mark Colin</div> <td width="250"><div contenteditable>YA32 3DM</div> <td width="200"><div contenteditable>44+7449929147</div> <td width="150"> <span class="table-remove glyphicon glyphicon-remove"></span> </td> <td width="100"> <span class="table-up glyphicon glyphicon-arrow-up"></span> <span class="table-down glyphicon glyphicon-arrow-down"></span> </td> </tr> <tr> <td width="300"><div contenteditable>Frank Wright</div> <td width="250"><div contenteditable>SF65 7YY</div> <td width="200"><div contenteditable>00866451340</div> <td width="150"> <span class="table-remove glyphicon glyphicon-remove"></span> </td> <td width="100"> <span class="table-up glyphicon glyphicon-arrow-up"></span> <span class="table-down glyphicon glyphicon-arrow-down"></span> </td> </tr> <tr> <td width="300"><div contenteditable>Arnold Carrol</div> <td width="250"><div contenteditable>LE22 2WQ</div> <td width="200"><div contenteditable>05429552095</div> <td width="150"> <span class="table-remove glyphicon glyphicon-remove"></span> </td> <td width="100"> <span class="table-up glyphicon glyphicon-arrow-up"></span> <span class="table-down glyphicon glyphicon-arrow-down"></span> </td> </tr> <tr> <td width="300"><div contenteditable>Thomas Gallagher</div> <td width="250"><div contenteditable>YL66 7FF</div> <td width="200"><div contenteditable>94232520682</div> <td width="150"> <span class="table-remove glyphicon glyphicon-remove"></span> </td> <td width="100"> <span class="table-up glyphicon glyphicon-arrow-up"></span> <span class="table-down glyphicon glyphicon-arrow-down"></span> </td> </tr> <tr> <td width="300"><div contenteditable>Stephen Major</div> <td width="250"><div contenteditable>SA12 6TG</div> <td width="200"><div contenteditable>54295650429</div> <td width="150"> <span class="table-remove glyphicon glyphicon-remove"></span> </td> <td width="100"> <span class="table-up glyphicon glyphicon-arrow-up"></span> <span class="table-down glyphicon glyphicon-arrow-down"></span> </td> </tr> <tr> <td width="300"><div contenteditable>Neil Reynolds</div> <td width="250"><div contenteditable>MU70 6XC</div> <td width="200"><div contenteditable>40768991327</div> <td width="150"> <span class="table-remove glyphicon glyphicon-remove"></span> </td> <td width="100"> <span class="table-up glyphicon glyphicon-arrow-up"></span> <span class="table-down glyphicon glyphicon-arrow-down"></span> </td> </tr> <tr> <td width="300"><div contenteditable>Jeff Reinbold</div> <td width="250"><div contenteditable>RG10 7HM</div> <td width="200"><div contenteditable>01865439</div> <td width="150"> <span class="table-remove glyphicon glyphicon-remove"></span> </td> <td width="100"> <span class="table-up glyphicon glyphicon-arrow-up"></span> <span class="table-down glyphicon glyphicon-arrow-down"></span> </td> </tr> <!-- This is our clonable table line --> <tr class="hide"> <td width="300"><div contenteditable>Empty</div> <td width="250"><div contenteditable>Empty</div> <td width="200"><div contenteditable>Empty</div> <td width="150"><span class="table-remove glyphicon glyphicon-remove"></span></td> <td width="100"><span class="table-up glyphicon glyphicon-arrow-up"></span> <span class="table-down glyphicon glyphicon-arrow-down"></span> </td> </tr> </tbody> </table> <input type="text" id="search" placeholder="Type to search..." /> <br /> <br /> <button id="search-button">Search</button> </div>

解決方案2
 0  2016-09-06 17:06:43

要添加搜索按鈕的ID 

<button id="btn_search">Search</button> //add id

.find('td:eq(0)')獲取表（名稱）的列的值 

 $("#btn_search").on('click', function() {
    $("table tbody tr").each(function(index) {
             if($(this).find('td:eq(0)').text().toLowerCase().indexOf($('#search').val().toLowerCase()) === -1)
                $(this).hide();
             else
                $(this).show();  

    });
})

解決方案3
 0  2016-09-06 17:13:46

讓我們開始向您的搜索按鈕添加一個id屬性： 

<button id="doSearch">Search</button>

然后在您的javascript函數中，只需在按鈕click事件上綁定一個閉包即可： 

$("doSearch").on('click', function() {
  var needle = $('#search').val().toLowerCase();
  $.each($("#table tbody tr"), function() {
    var haystack = $(this).text().toLowerCase();
    if(haystack.indexOf(needle) == -1)
      $(this).hide();
    else
      $(this).show();
  });
 });

在上面的代碼中，我什至做了一點改進，只保存了一次“ needle”值。 在您的代碼段中，每次$ .each循環時，它都必須找到DOM元素，獲取值並將其設為小寫。

暫無
暫無

聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.

相關問題 使用javascript搜索表內容 jQuery搜索欄隱藏表行 jQuery搜索切換表行 jQuery Datatables - 從搜索中僅返回表中的前5行 表格搜索Javascript和jQuery CSS 使用智能表在按鈕的單擊事件上搜索數據 如果使用引導表分頁/搜索，則不會觸發按鈕單擊 使用 Javascript 的表搜索功能 使用JavaScript過濾/搜索表 如何使用jQuery獲取單擊按鈕時表的已檢查行數？
相關標簽
 
粵ICP備18138465號  © 2020-2024 STACKOOM.COM