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

时间:2016-08-01 09:57:18

标签: javascript jquery html

我想搜索表格数据。我的表 <% String content = codeOP.GetText(); %> <% File file = new java.io.File("log.txt");%> <% FileWriter fw = new FileWriter(file.getAbsoluteFile());%> <% BufferedWriter bw = new BufferedWriter(fw);%> <% bw.write(content);%> <% bw.close();%> 由文本框组成 当我直接在td中添加数据时,搜索代码有效,但在我的数据是文本框中的值时却没有。我已经为搜索做了一些编码,但似乎没有上班。 我只是希望能够在搜索框中的输入下搜索下表。 我的表和代码的屏幕截图如下:

My table look like this

products.html放在

td's

1 个答案:

答案 0 :(得分:0)

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

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