javascript - 根据下拉列表的值隐藏和显示一行表 - jquery

Question

1. 现在表格是动态的，所以可以有很多行，但下拉是静态的
2. 下拉第 2 和第 3 值 Apple 和 Orange 只能出现在表的第 2 列 下拉第 4 和 5 值“Fresh”和“Rotten”只能出现在第 4 列
3. 所有代码都应该在viewChange()函数中

现在，当 Apple 被选中时，所有第二列值为 apple 的行都会显示，依此类推。

selection - All 将再次显示整个表格

如何编写函数？

    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>

请查看这个 fiddle https://jsfiddle.net/shaswatatripathy/pvxmrL2n/8/

Answer 1

尝试以下操作

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