将HTML文本框作为tr中的数据。如何在搜索字符串输入时对这样的表执行动态搜索操作？

以下是我的html代码。我使用<sql:...>从数据库获取数据，并使用<c:forEach ...>进一步迭代，并将数据作为tr内的文本框中的值。
现在我想对这样的表执行动态搜索操作。我尝试了一些使用jquery的代码，但它似乎只在将数据添加到我的 tr时直接工作，如<tr>${row.barcode}</tr>。该代码不适用于<td> <input type="text" value="${row.barcode}"> </td>。

products.html放在将HTML文本框作为tr中的数据。如何在搜索字符串输入时对这样的表执行动态搜索操作？

<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>

来源

2016-08-02 prthmsh jadv

余部分找到了解决办法。搜索正在工作，但不能按预期工作。它隐藏所有与搜索字符串不匹配的单元格。

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

来源

2016-08-02 12:08:58

将HTML文本框作为tr中的数据。如何在搜索字符串输入时对这样的表执行动态搜索操作？

回答

相关问题