- 现在表格是动态的,所以可以有很多行,但下拉是静态的
- 下拉第 2 和第 3 值 Apple 和 Orange 只能出现在表的第 2 列 下拉第 4 和 5 值“Fresh”和“Rotten”只能出现在第 4 列
- 所有代码都应该在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/
最佳答案
尝试以下操作
$.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/
关于javascript - 根据下拉列表的值隐藏和显示一行表 - jquery,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/43603618/