如何使用jQuery搜索“输入类型文本”的HTML表数据？

I want to SEARCH table data. My table td consists of textboxes.
The code for searching works when I directly add data in td's but does not when my data is a value in textbox. I've have done some coding for searching but it doesn't seem to work. I just want to be able to search below table on input in a search box. Screenshot of my table and code is given below :

我想搜索表数据。我的表td由文本框组成。当我直接在td中添加数据时,搜索代码有效,但当我的数据是文本框中的值时却没有。我已经为搜索做了一些编码,但似乎没有用。我只是想在搜索框中搜索下面的表格。我的表和代码的屏幕截图如下:

products.html

    <script type="text/javascript">
    $(document).ready(
        function() {
            $("#search").keyup(
                    function () 
                    {
                        var value = this.value.toLowerCase().trim();
                        $("table tr").each(
                            function (index) 
                            {
                                if (!index) return;
                                $(this).find("td").children().attr("value").each(
                                     function () 
                                     {
                                         var id = $(this).text().toLowerCase().trim();
                                         var not_found = (id.indexOf(value) == -1);
                                         $(this).closest('tr').toggle(!not_found);
                                         return not_found;
                                     });
                            });
                    }); 
        });
    </script>

   <!-- Fetch table data -->
   <sql:setDataSource var="myDataSource" driver="oracle.jdbc.OracleDriver" url="jdbc:oracle:thin:@10.1.56.49:1521:something" user="something" password="something"/>
   <sql:query var="result" sql="select * from garageproducts" dataSource="${myDataSource}"/>

    <table id="mytable" class="table table-hover">
            <thead>
              <tr>
                <th>Mark</th>
                <th>Barcode</th>
                <th>Name</th>
                <th>Brand</th>
                <th>Stock</th>
                <th>Cost</th>
              </tr>
            </thead>
            <tbody>
                <%! int cnt=0; %>
                <c:forEach var="row" items="${result.rows}">
                  <tr>
                    <td hidden="true">${row.pid}</td>
                    <td>
                        <input type="checkbox" value="">
                    </td>
                    <td><input type="text" id='<%= "barcode"+cnt %>' value="${row.barcode}" name="barcodename" class="form-control input-sm"></td>
                    <td><input type="text" id='<%= "name"+cnt %>' value="${row.name}" name="namename" class="form-control input-sm"></td>
                    <td><input type="text" id='<%= "brand"+cnt %>' value="${row.brand}" name="brandname" class="form-control input-sm"></td>
                    <td><input type="text" id='<%= "stock"+cnt %>' value="${row.stock}" name="stockname" class="form-control input-sm"></td>
                    <td><input type="text" id='<%= "cost"+cnt %>' value="${row.cost}" name="costname" class="form-control input-sm"></td>
                  </tr>
                  <% ++cnt; %>
                </c:forEach>

            </tbody>
    </table>

1 个解决方案

#1

I partially found a solution. The search is working but it does not work as expected. It hides the cells which do not match the search string.

我部分找到了解决方案。搜索工作正常,但无法按预期工作。它隐藏了与搜索字符串不匹配的单元格。

Following is the fiddle link for the same: https://jsfiddle.net/freecoder/hfhtga0g/6/

以下是相同的小提琴链接:https://jsfiddle.net/freecoder/hfhtga0g/6/

   <script type="text/javascript">

      $(document).ready(function() {
              $("#search").keyup(function() {
                _this = this;
                // Show only matching TR, hide rest of them
                $.each($('#mytable tbody tr td>input[type="text"]'), function() {
                  if ($(this).val().toLowerCase().indexOf($(_this).val().toLowerCase()) === -1)
                    $(this).hide();
                  else
                    $(this).show();
                });
              });
            });

    </script>

    <html>
      <label for="search">Search products :</label>
      <input type="text" id="search" placeholder="Enter text to search">

      <!-- Fetch table data -->
       <sql:setDataSource var="myDataSource" driver="oracle.jdbc.OracleDriver" url="jdbc:oracle:thin:@10.1.56.49:1521:something" user="something" password="something"/>
       <sql:query var="result" sql="select * from garageproducts" dataSource="${myDataSource}"/>

            <table id="mytable">
                    <thead>
                      <tr>
                        <th>Mark</th>
                        <th>Barcode</th>
                        <th>Name</th>
                        <th>Brand</th>
                        <th>Stock</th>
                        <th>Cost</th>
                      </tr>
                    </thead>
                    <tbody>

                        <c:forEach var="row" items="${result.rows}">
                          <tr>
                            <td> <input type="checkbox">                    </td>
                            <td> <input type="text" value="${row.barcode}"> </td>
                            <td> <input type="text" value="${row.name}">    </td>
                            <td> <input type="text" value="${row.brand}">   </td>
                            <td> <input type="text" value="${row.stock}">   </td>
                            <td> <input type="text" value="${row.cost}">    </td>
                          </tr>
                        </c:forEach>

                    </tbody>
            </table>
    </html>

#1