HTMLのテキストボックスはtrのデータとして表示されます。検索文字列の入力時にそのようなテーブルに対して動的検索操作を実行するにはどうすればよいですか？

以下は私のHTMLコードです。私は<sql:...>を使用してデータベースからデータを取得し、さらに<c:forEach ...>を使用して反復処理を行い、の範囲内にあるテキストの値としてを含みます。
今、このようなテーブルに対して動的検索操作を実行したいと考えています。私は jqueryを使っていくつかのコードを試してみましたが、に直接データを追加すると動作します。<tr>${row.barcode}</tr>。 <td> <input type="text" value="${row.barcode}"> </td>のコードは機能しません。

products.htmlHTMLのテキストボックスは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のデータとして表示されます。検索文字列の入力時にそのようなテーブルに対して動的検索操作を実行するにはどうすればよいですか？

答えて

関連する問題