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

Question

我想搜索表数据。 我的表td由文本框组成。
当我直接在td's添加数据时，用于搜索的代码有效，但是当我的数据是文本框中的值时，搜索代码无效。 我已经为搜索做了一些编码，但是似乎没有用。 我只希望能够在搜索框中输入以下内容进行搜索。 我的表和代码的屏幕截图如下：

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>

Answer 1

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

以下是相同的小提琴链接： 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>

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

问题描述

1 个解决方案

解决方案1
0 2016-08-02 12:14:58

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

问题描述

1 个解决方案

解决方案1 0 2016-08-02 12:14:58

解决方案1
0 2016-08-02 12:14:58