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

Posted 2023-03-11

技术标签:

【中文标题】根据下拉列表的值隐藏和显示一行表格 - jquery【英文标题】：Hide and Show a row of table based on the value of a dropdown - jquery 【发布时间】：2017-04-25 06:52:05 【问题描述】：

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

现在，当Apple使用苹果将显示第2列值的所有行将显示等等。

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>

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

【问题讨论】：

您对此代码有疑问吗？我只能看到你的要求列表添加了问题看这里***.com/questions/35632168/… 【参考方案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】：

如您所问，我正在添加另一种解决方案，您的 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>

【讨论】：

在加载时，它不显示任何行，它应该全部默认并显示整个表格，点击运行代码sn-p并查看如果是动态表格，你就可以添加类，你需要做的就是编辑你的html模板编辑了 sn-p 以使所有行在加载时可见添加了另一种解决方案来解决您的问题。解决方案 1 对您的 html 没有任何修改，解决方案 2 对您的 html 进行更改。我更喜欢使用解决方案 2，因为这样更整洁。【参考方案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>

【讨论】：

我们没有任何关于table的数据见表中第 4 列检查更新的答案fiddle【参考方案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>

【讨论】：

以上是关于根据下拉列表的值隐藏和显示一行表格 - jquery的主要内容，如果未能解决你的问题，请参考以下文章

根据asp.net中的值隐藏元素？

大型 html 表慢吗？

Vuejs 根据从下拉列表中选择的值显示其他输入字段

根据表格数据隐藏和显示单选按钮

使用angularjs在html中的表格数据单元格上显示下拉列表

隐藏和显示剑道网格的行