Hide and Show a row of table based on the value of a dropdown - jquery

Question

1. Now the Table is dynamic so many rows can come but drop down is static
2. drop down 2nd and 3rd value Apple and Orange can only come in the tables 2nd column And dropdown 4th and 5 th value "Fresh" and "Rotten" can only come in the 4th column
3. all the code should be in the function viewChange ()

Now when Apple is selected all the rows with 2nd column value with apple will show and so on.

selection - All will show the whole table again

How do I write the function?

  function ViewChange() { var selectedViewName = $('#dropDown :selected').val(); switch (selectedViewName) { case("1"): selectedViewName="ALL"; break; case("2"): selectedViewName = "Apple"; break; case("3"): selectedViewName = "Orange"; break; case("4"): selectedViewName = "Fresh"; break case("5"): selectedViewName = "Rotten"; break } 

 <select id="dropDown" onchange="ViewChange()"><option value="1">All</option> <option value="2">Apple</option> <option value="3">Orange</option> <option value="4">Fresh</option> <option value="5">Rotten</option> </select> <table id="tableID"> <thead> <tr> <th>Name</th> <th>Fruit type</th> <th>place</th> <th>state</th> </tr> </thead> <tbody> <tr> <td>salim groceries</td> <td>apple</td> <td>nagpur</td> <td>fresh</td> </tr> <tr> <td>monalisa groceries</td> <td>Apple</td> <td>Belapur</td> <td>Rotten</td> </tr> <tr> <td>taj groceries</td> <td>Orange</td> <td>Nasik</td> <td>Fresh</td> </tr> <tr> <td>suraj groceries</td> <td>Orange</td> <td>Goa</td> <td>Rotten</td> </tr> </tbody> </table> 

Please check out this fiddle https://jsfiddle.net/shaswatatripathy/pvxmrL2n/8/

Answer 1

As you asked, I am adding one more solution where there is no changes in your HTML.

Solution 1 : Without changes in HTML

 document.getElementById("dropDown").addEventListener("change", viewChange) function viewChange() { var value = $('#dropDown :selected').text(); if(value=="All"){ $("#tableID tbody tr").removeClass("hiddenItem"); } else { $("#tableID tbody tr").addClass("hiddenItem"); $("#tableID tbody tr td").each(function (key, tdElem) { if(tdElem.innerHTML.toLocaleUpperCase() == value.toLocaleUpperCase()){ $(tdElem.parentElement).removeClass("hiddenItem"); } }); } } 

 .hiddenItem { display : none; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <select id="dropDown"><option value="1">All</option> <option value="2">Apple</option> <option value="3">Orange</option> <option value="4">Fresh</option> <option value="5">Rotten</option> </select> <table id="tableID"> <thead> <tr> <th>Name</th> <th>Fruit type</th> <th>place</th> <th>state</th> </tr> </thead> <tbody> <tr > <td>salim groceries</td> <td>apple</td> <td>nagpur</td> <td>Fresh</td> </tr> <tr > <td>monalisa groceries</td> <td>Apple</td> <td>Belapur</td> <td>Rotten</td> </tr> <tr > <td>taj groceries</td> <td>Orange</td> <td>Nasik</td> <td>Fresh</td> </tr> <tr > <td>suraj groceries</td> <td>Orange</td> <td>Goa</td> <td>Rotten</td> </tr> </tbody> </table> 

Solution 2 : With changes in HTML

Try this, It works

 document.getElementById("dropDown").addEventListener("change", viewChange) function viewChange() { var value = this.value; if(value=="All"){ $("#tableID tbody tr").removeClass("hiddenItem"); } else { $("#tableID tbody tr").addClass("hiddenItem"); $("#tableID tbody ." + value).removeClass("hiddenItem"); } } 

 .hiddenItem { display : none; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <select id="dropDown" ><option value="All">All</option> <option value="Apple">Apple</option> <option value="Orange">Orange</option> <option value="Fresh">Fresh</option> <option value="Rotten">Rotten</option> </select> <table id="tableID"> <thead> <tr> <th>Name</th> <th>Fruit type</th> <th>place</th> <th>state</th> </tr> </thead> <tbody> <tr class="Apple Nagpur Fresh"> <td>salim groceries</td> <td>Apple</td> <td>Nagpur</td> <td>Fresh</td> </tr> <tr class="Apple Belapur Rotten" > <td>monalisa groceries</td> <td>Apple</td> <td>Belapur</td> <td>Rotten</td> </tr> <tr class="Orange Nasik Fresh" > <td>taj groceries</td> <td>Orange</td> <td>Nasik</td> <td>Fresh</td> </tr> <tr class="Orange Goa Rotten" > <td>suraj groceries</td> <td>Orange</td> <td>Goa</td> <td>Rotten</td> </tr> </tbody> </table> 

Answer 2

Try the following

 $.expr[":"].contains = $.expr.createPseudo(function(arg) { return function( elem ) { return $(elem).text().toUpperCase().indexOf(arg.toUpperCase()) >= 0; }; }); function ViewChange($this) { var pid = $('option:selected', $this).text(); $('#tableID tr').hide(); $('#tableID tr > td:contains(' + pid + ')').each(function () { $(this).parent().toggle(); }); if(pid == "All") { $('#tableID tr').show(); } else { $('#tableID tr:first').show(); } } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <select id="dropDown" onchange="ViewChange(this)"><option value="1">All</option> <option value="2">Apple</option> <option value="3">Orange</option> <option value="4">Fresh</option> <option value="5">Rotten</option> </select> <table id="tableID"> <thead> <tr> <th>Name</th> <th>Fruit type</th> <th>place</th> <th>state</th> </tr> </thead> <tbody> <tr > <td>salim groceries</td> <td>apple</td> <td>nagpur</td> <td>Fresh</td> </tr> <tr > <td>monalisa groceries</td> <td>Apple</td> <td>Belapur</td> <td>Rotten</td> </tr> <tr > <td>taj groceries</td> <td>Orange</td> <td>Nasik</td> <td>Fresh</td> </tr> <tr > <td>suraj groceries</td> <td>Orange</td> <td>Goa</td> <td>Rotten</td> </tr> </tbody> </table> 

Here is the working jsfiddle: https://jsfiddle.net/pvxmrL2n/10/

Answer 3

 function ViewChange($this) { var $selectText = $('option:selected', $this).text().toLowerCase(); var $val = $($this).val(); if ($selectText != 'all') { $('tr').each(function () { if ($(this).find('td').length) { var txt = ''; if ($val < 4) txt = $(this).find('td:eq(1)').text().toLowerCase(); else txt = $(this).find('td:eq(3)').text().toLowerCase(); if (txt === $selectText) { $(this).show(); } else { $(this).hide(); } } }) } else { $('tr').show(); } } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <select id="dropDown" onchange="ViewChange(this)"><option value="1">All</option> <option value="2">Apple</option> <option value="3">Orange</option> <option value="4">Fresh</option> <option value="5">Rotten</option> </select> <table id="tableID"> <thead> <tr> <th>Name</th> <th>Fruit type</th> <th>place</th> <th>state</th> </tr> </thead> <tbody> <tr > <td>salim groceries</td> <td>apple</td> <td>nagpur</td> <td>Fresh</td> </tr> <tr > <td>monalisa groceries</td> <td>Apple</td> <td>Belapur</td> <td>Rotten</td> </tr> <tr > <td>taj groceries</td> <td>Orange</td> <td>Nasik</td> <td>Fresh</td> </tr> <tr > <td>suraj groceries</td> <td>Orange</td> <td>Goa</td> <td>Rotten</td> </tr> </tbody> </table> 

Answer 4

You can go trough this file and check the functionality which can auto check every text

https://jsfiddle.net/pvxmrL2n/23/


https://jsfiddle.net/pvxmrL2n/23/

https://jsfiddle.net/pvxmrL2n/23/

 function ViewChange(miljo) { var res = miljo.toLowerCase(); var rows = document.getElementsByTagName("table")[0].rows; var count=0; for(count = 0; count < rows.length; count++) { var j=0; if(rows[count].className=='allrecords'){ if(res=='all') { rows[count].style.display = ''; }else{ rows[count].style.display = 'none'; for ( j = 0; j < rows[count].cells.length; j++) { var contentval=rows[count].cells[j].innerText; contentvallwr=contentval.toLowerCase(); if(res==contentvallwr) { rows[count].style.display = ''; break; } } } } } } 

 <select id="dropDown" onchange="ViewChange(this.options[this.selectedIndex].innerHTML)"> <option value="1">All</option> <option value="2">Apple</option> <option value="3">Orange</option> <option value="4">Fresh</option> <option value="5">Rotten</option> </select> <table id="tableID"> <thead> <tr class="head"> <th>Name</th> <th>Fruit type</th> <th>place</th> <th>state</th> </tr> </thead> <tbody> <tr class="allrecords" > <td>salim groceries</td> <td>apple</td> <td>nagpur</td> <td>Fresh</td> </tr> <tr class="allrecords"> <td>monalisa groceries</td> <td>Apple</td> <td>Belapur</td> <td>Rotten</td> </tr> <tr class="allrecords"> <td>taj groceries</td> <td>Orange</td> <td>Nasik</td> <td>Fresh</td> </tr> <tr class="allrecords"> <td >suraj groceries</td> <td>Orange</td> <td>Goa</td> <td>Rotten</td> </tr> </tbody> </table>