How to search HTML table data of ''input type text'' using jQuery?

Question

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 :

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

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/

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

How to search HTML table data of ''input type text'' using jQuery?

Question

1 answers

solution1
0 2016-08-02 12:14:58

How to search HTML table data of ''input type text'' using jQuery?

Question

1 answers

solution1 0 2016-08-02 12:14:58

solution1
0 2016-08-02 12:14:58