隱藏和顯示基於一個下拉的值表的行 - jQuery的

Question

1. 現在的表是動態的，所以很多行能來，但下拉是靜態
2. 下拉第2個和第3個值蘋果和Orange只能來表第2列和下拉4日和5日值「食」和「爛」只可能在第4列
3. 所有的代碼應該在功能viewChange（）現在

在當Apple被選中所有具有第二列值的行與蘋果將顯示等等。

選擇 - 全部將再次顯示整個表格

如何編寫函數？

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>

請看看這個小提琴https://jsfiddle.net/shaswatatripathy/pvxmrL2n/8/

Answer 1

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 2

至於你問，我加入了一個多解決方案，其中有你的HTML沒有變化。

解決方法1：如果沒有在HTML

document.getElementById("dropDown").addEventListener("change", viewChange) 
 

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

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

變化解決方案2：隨着HTML變化

試試這個，它的工作原理

document.getElementById("dropDown").addEventListener("change", viewChange) 
 

 
function viewChange() 
 
{ 
 
    var value = this.value; 
 
    if(value=="All"){ 
 
    \t $("#tableID tbody tr").removeClass("hiddenItem"); 
 
    } else { 
 
    \t $("#tableID tbody tr").addClass("hiddenItem"); 
 
    \t $("#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 \t Nasik \t Fresh" > 
 
       <td>taj groceries</td> 
 
       <td>Orange</td> 
 
       <td>Nasik</td> 
 
       <td>Fresh</td> 
 
      </tr> 
 
      <tr class="Orange \t Goa \t Rotten" > 
 
       <td>suraj groceries</td> 
 
       <td>Orange</td> 
 
       <td>Goa</td> 
 
       <td>Rotten</td> 
 
      </tr> 
 
    </tbody> 
 

 
</table>

Answer 3

請嘗試以下

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

這裏是工作的jsfiddle：https://jsfiddle.net/pvxmrL2n/10/

Answer 4

你可以走線槽這個文件，並檢查功能，它可以自動檢查每個文字

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>