Databases
StackOverflow2013
Postsdbo
POSearch Multiple Tables by ID using jQuery
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POSearch Multiple Tables by ID using jQuery
    primarykey
    data
    text
    <p>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.</p> <p>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.. </p> <p><a href="http://jsfiddle.net/rFGWZ/402/" rel="nofollow">here is JSFiddle</a></p> <p>Here is my rendered HTML in browser</p> <pre><code>&lt;input type="text" id="search" placeholder=" find table by Chassis No" style="width:200px"&gt;&lt;/input&gt; &lt;br/&gt; Table 1 &lt;table style="margin-top: 0px;" class="style1"&gt; &lt;thead&gt; &lt;/thead&gt; &lt;tbody&gt; &lt;tr class="makeborder"&gt; &lt;td style="width: 122px" rowspan="4"&gt; &lt;/td&gt; &lt;td style="width: 140px;"&gt;Stock No&lt;/td&gt; &lt;td style="width: 140px;"&gt;6&lt;/td&gt; &lt;td&gt;Make&lt;/td&gt; &lt;td&gt;HONDA&lt;/td&gt; &lt;td&gt; Model&lt;/td&gt; &lt;td&gt;ACTY&lt;/td&gt; &lt;td&gt; COLOR &lt;/td&gt; &lt;td&gt;BAIGE/GREEN&lt;/td&gt; &lt;td&gt;&lt;img src="flags/~\flags\japan.png"&gt;&lt;/td&gt; &lt;/tr&gt; &lt;tr class="makeborder"&gt; &lt;td&gt;Price &lt;/td&gt; &lt;td style="width: 140px;"&gt; 0.0000&lt;/td&gt; &lt;td&gt;Fuel&lt;/td&gt; &lt;td&gt;DIESEL&lt;/td&gt; &lt;td class="coldata"&gt;Steering &lt;/td&gt; &lt;td&gt;LEFT&lt;/td&gt; &lt;td style="background-color:red; color:white"&gt;Chassis No&lt;/td&gt; &lt;td class="Chassis_No" style="background-color:red; color:white"&gt;7894566412&lt;/td&gt; &lt;td&gt;&lt;/td&gt; &lt;/tr&gt; &lt;tr class="makeborder"&gt; &lt;td &gt;Year&lt;/td&gt; &lt;td style="width: 140px;"&gt;2013 &lt;/td&gt; &lt;td&gt;Mileage&lt;/td&gt; &lt;td&gt;150&lt;/td&gt; &lt;td&gt;Type&lt;/td&gt; &lt;td&gt;TRUCK&lt;/td&gt; &lt;td&gt;Door/Seat&lt;/td&gt; &lt;td&gt;3/&lt;/td&gt; &lt;td&gt;&lt;/td&gt; &lt;/tr&gt; &lt;/tbody&gt;&lt;/table&gt; Table 2 &lt;table style="margin-top: 0px;" class="style1"&gt; &lt;thead&gt; &lt;/thead&gt; &lt;tbody&gt; &lt;tr class="makeborder"&gt; &lt;td style="width: 122px" rowspan="4"&gt; &lt;/td&gt; &lt;td style="width: 140px;"&gt;Stock No&lt;/td&gt; &lt;td style="width: 140px;"&gt;6&lt;/td&gt; &lt;td&gt;Make&lt;/td&gt; &lt;td&gt;HONDA&lt;/td&gt; &lt;td&gt; Model&lt;/td&gt; &lt;td&gt;ACTY&lt;/td&gt; &lt;td&gt; COLOR &lt;/td&gt; &lt;td&gt;BAIGE/GREEN&lt;/td&gt; &lt;td&gt;&lt;img src="flags/~\flags\japan.png"&gt;&lt;/td&gt; &lt;/tr&gt; &lt;tr class="makeborder"&gt; &lt;td&gt;Price &lt;/td&gt; &lt;td style="width: 140px;"&gt; 0.0000&lt;/td&gt; &lt;td&gt;Fuel&lt;/td&gt; &lt;td&gt;DIESEL&lt;/td&gt; &lt;td class="coldata"&gt;Steering &lt;/td&gt; &lt;td&gt;LEFT&lt;/td&gt; &lt;td style="background-color:red; color:white"&gt;Chassis No&lt;/td&gt; &lt;td class="Chassis_No" style="background-color:red; color:white"&gt;135498698&lt;/td&gt; &lt;td&gt;&lt;/td&gt; &lt;/tr&gt; &lt;tr class="makeborder"&gt; &lt;td &gt;Year&lt;/td&gt; &lt;td style="width: 140px;"&gt;2013 &lt;/td&gt; &lt;td&gt;Mileage&lt;/td&gt; &lt;td&gt;150&lt;/td&gt; &lt;td&gt;Type&lt;/td&gt; &lt;td&gt;TRUCK&lt;/td&gt; &lt;td&gt;Door/Seat&lt;/td&gt; &lt;td&gt;3/&lt;/td&gt; &lt;td&gt;&lt;/td&gt; &lt;/tr&gt; &lt;/tbody&gt;&lt;/table&gt; </code></pre> <p>A Script which i am using to achieve this task</p> <pre><code>$("#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(); } } }); }); </code></pre>
    singulars
    1. PO
      singulars
      1. PTAnswer
    1. This table or related slice is empty.
    1. PTQuestion
    1. USSiddiq Baig
    1. USSiddiq Baig
    plurals
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. PO
      singulars
      1. PTAnswer
    2. PO
      singulars
      1. PTAnswer
    1. VO
      singulars
      1. POSearch Multiple Tables by ID using jQuery
      1. This table or related slice is empty.
      1. VTUpMod
    1. COI hope you know that **IDs are supposed to be unique in DOM**. Please try replacing ID with class instead.
      singulars
      1. POSearch Multiple Tables by ID using jQuery
      1. USpalaѕн
    2. CO@palaѕн yup you are right i have updated it now.. actually in asp.net application in listview it will crate the multiple ids dynamically with same name but it`s does`t matter i will replace it to class instead of id but now i have updated id to class here
      singulars
      1. POSearch Multiple Tables by ID using jQuery
      1. USSiddiq Baig
    3. COAs a general rule of thumb, ID's are supposed to be unique, whereas classes can be used to select multiple elements. However, you can make use of *container elements* to achieve the same results.
      singulars
      1. POSearch Multiple Tables by ID using jQuery
      1. USejc
 

Querying!

 
Guidance
A row detail

Detail views are divided into sections. All the information in the data section comes from columns in the selected row. The other sections display data from other, related rows.

Related data can be related in a to-one or a to-many fashion. Captions of data related in a to-many fashion link to a list view showing a filtered view of the table.

Try moving around until you find a non-empty to-many entry and click on the label to get to one. You can move back to the root by clicking on the database name in the header.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload