CODEWITHSUNDEEP
javascriptjqueryhtml
tripathy
tripathy

Reputation: 385

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

  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/

Upvotes: 1

Views: 4219

Answers (4)

Sarin Jacob Sunny
Sarin Jacob Sunny

Reputation: 2138

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>

Upvotes: 1

MILJO JOHN
MILJO JOHN

Reputation: 36

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>

Upvotes: 0

selvarajmas
selvarajmas

Reputation: 1643

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/

Upvotes: 1

RonyLoud
RonyLoud

Reputation: 2436

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>

Upvotes: 0

Related Questions