javascript - 使用 javascript/jQuery 搜索表格并在单击按钮时返回正确的表格行以及 'search' 栏的内容

Question

基本上，我目前有一个使用 .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> 

Answer 1

首先，将 ID 添加到您的搜索按钮:

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

然后将点击事件添加到您的 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>