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

时间：2017-04-25 06:52:05

标签： javascript jquery html

  1. 现在表是动态的，所以很多行可以来，但下拉是静态的
  2. 下降第二和第三个值Apple和Orange只能进入表格第二列并且下拉第四和第五个值＆＃34; Fresh＆＃34;和＆＃34;腐烂＆＃34;只能进入第4栏
  3. 所有代码都应该在函数viewChange（）
    4. 中

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

    选择 - 所有将再次显示整个表

    我该如何编写这个函数？

    ＆＃13;
    ＆＃13; 
        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

}
    ＆＃13; 
    <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>
    ＆＃13;
    ＆＃13;
    ＆＃13;

    请查看这个小提琴https://jsfiddle.net/shaswatatripathy/pvxmrL2n/8/

4 个答案:

答案 0 :(得分：1)

正如您所问，我正在添加一个解决方案，其中HTML没有任何变化。

解决方案1：无需更改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>

解决方案2：改变HTML

试试这个，它有效

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>

答案 1 :(得分：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/

答案 2 :(得分：0)

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>

答案 3 :(得分：0)

您可以通过此文件检查可以自动检查每个文本的功能

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


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

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

＆＃13;
＆＃13; 
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;
         }
    }  
    }
   }
  }

}
＆＃13; 
<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>
＆＃13;
＆＃13;
＆＃13;

相关问题
最新问题