CODEWITHSUNDEEP
jqueryasp.net
Siddiq Baig
Siddiq Baig

Reputation: 586

Search Multiple Tables by ID using jQuery

Net application i am using ListView which Renders HTML of multiple Tables in browser. what i need is to search by an ID inside table and if ID will be matched then shows the only table which have that ID that was given by an input.

For simplicity i Created JSFiddle in which there are two table when i put chassis no inside textbox then show the table which have matching chassis no id but i am not able to achieve simple task so sorry for this..

here is JSFiddle

Here is my rendered HTML in browser

<input type="text" id="search" placeholder="  find table by Chassis No" style="width:200px"></input>
<br/>
Table 1
<table style="margin-top: 0px;" class="style1">
   <thead>
   </thead>
<tbody>
    <tr class="makeborder">
       <td style="width: 122px" rowspan="4">       
       </td>
       <td style="width: 140px;">Stock No</td>
       <td style="width: 140px;">6</td>
       <td>Make</td>
       <td>HONDA</td>
       <td> Model</td>
       <td>ACTY</td>
       <td> COLOR </td>
       <td>BAIGE/GREEN</td>
       <td><img src="flags/~\flags\japan.png"></td>
    </tr>
       <tr class="makeborder">
       <td>Price </td>
       <td style="width: 140px;"> 0.0000</td>
       <td>Fuel</td>
      <td>DIESEL</td>
        <td class="coldata">Steering </td>
        <td>LEFT</td>
        <td style="background-color:red; color:white">Chassis No</td>
        <td class="Chassis_No" style="background-color:red; color:white">7894566412</td>
        <td></td>
  </tr>
  <tr class="makeborder">
        <td >Year</td>
        <td style="width: 140px;">2013 </td>
        <td>Mileage</td>
        <td>150</td>
        <td>Type</td>
        <td>TRUCK</td>
        <td>Door/Seat</td>
        <td>3/</td>
        <td></td>
   </tr>
</tbody></table>

Table 2
<table style="margin-top: 0px;" class="style1">
   <thead>
   </thead>
<tbody>
    <tr class="makeborder">
       <td style="width: 122px" rowspan="4">       
       </td>
       <td style="width: 140px;">Stock No</td>
       <td style="width: 140px;">6</td>
       <td>Make</td>
       <td>HONDA</td>
       <td> Model</td>
       <td>ACTY</td>
       <td> COLOR </td>
       <td>BAIGE/GREEN</td>
       <td><img src="flags/~\flags\japan.png"></td>
    </tr>
       <tr class="makeborder">
       <td>Price </td>
       <td style="width: 140px;"> 0.0000</td>
       <td>Fuel</td>
      <td>DIESEL</td>
        <td class="coldata">Steering </td>
        <td>LEFT</td>
        <td style="background-color:red; color:white">Chassis No</td>
        <td class="Chassis_No"  style="background-color:red; color:white">135498698</td>
        <td></td>
  </tr>
  <tr class="makeborder">
        <td >Year</td>
        <td style="width: 140px;">2013 </td>
        <td>Mileage</td>
        <td>150</td>
        <td>Type</td>
        <td>TRUCK</td>
        <td>Door/Seat</td>
        <td>3/</td>
        <td></td>
   </tr>
</tbody></table>

A Script which i am using to achieve this task

$("#search").on("keyup", function() {
    var value = $(this).val();
    $(".style1 tr").each(function(index) {
        if (index !== 0) {

            $row = $(this);

            var Chasis_no = $row.find("td .Chassis_No").text();

            if (Chasis_no.indexOf(value) !== 0) {
                $(".style1").hide();
            }
            else {
                 $(".style1").show();
            }
        }
    });
});

Upvotes: 1

Views: 1172

Answers (2)

Jeff Dalley
Jeff Dalley

Reputation: 1311

Slightly different spin, similar idea.

$("#search").on("keyup", function() {
    var value = $(this).val();
    $("table").each(function (index) {
        var chassisNo = $(this).find('.Chassis_No').text();

        if (value !== chassisNo) {
            $(this).hide();
        }
        else {
            $(this).show();
        }
    });
});

Or a really fun way to do it with just selectors :P

if (value) {
   $('table .Chassis_No:not([text="' 
      + value + '"])').parents('table').hide();
   $('table .Chassis_No:contains("'
      + value + '")').parents('table').show();
} 
else {
  $('table').show() 
}

Upvotes: 1

Chris Berlin
Chris Berlin

Reputation: 1067

http://jsfiddle.net/rFGWZ/404/

 $("#search").on("keyup", function () {
            var value = $(this).val();
            $(".style1 tr").each(function (index) {
                if (index !== 0) {

                    $row = $(this);
                    if ($row.find('.Chassis_No').length > 0) {
                        var Chasis_no = $row.find("td.Chassis_No").text();

                        if (Chasis_no.indexOf(value) > -1) {
                            $(this).closest('.style1').show();
                        }
                        else {
                            $(this).closest('.style1').hide();
                        }
                    }
                }
            });
        });

Upvotes: 1

Related Questions