我有一个包含动态创建的表的页面。这些表的 ID 存储在数据库中，可以匹配页面上选择列表的值。默认情况下，所有表都是隐藏的。我想根据选定的选项值显示和隐藏表格。显示与所选选项值匹配的 ID 表，并隐藏其他不匹配的表。下面的代码用于显示匹配表。但是，如果与所选选项不匹配，我该如何隐藏表格？$('#unit_table').hide();$('#program_levels').change(function(){ if($("#" + this.value + "_table").is(":hidden")){ $("#" + this.value + "_table").show(); } else { } });
3 回答
素胚勾勒不出你
TA贡献1827条经验 获得超9个赞
您可以使用带有属性选择器的结尾来隐藏所有具有 id 结尾的非匹配表_table，请参阅下面的代码
$('#unit_table').hide();
$('#program_levels').change(function(){
//hide all tables
$("table[id$='_table'").hide();
//show all matching tables only
//if($("#" + this.value + "_table").is(":hidden")){ // if condition not required
$("#" + this.value + "_table").show();
//}
});
缥缈止盈
TA贡献2041条经验 获得超4个赞
你也可以试试这个。
$(document).ready(function(){
$(".jsTable tr").hide();
$(".jsSelect").change(function(){
var oVal = $(this).val();
$(".jsTable tr").hide();
if(oVal!="")
{
$(".jsTable tr[id="+oVal+"]").show();
}
})
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<html>
<body>
<h2>Show hide</h2>
<select class="jsSelect">
<option value="">Select</option>
<option value="A">A</option>
<option value="B">B</option>
<option value="C">C</option>
<option value="D">D</option>
</select>
<br/>
<table class="jsTable">
<tr id="A">
<td>Alfreds Futterkiste</td>
<td>Maria Anders</td>
<td>Germany</td>
</tr>
<tr id="B">
<td>Centro comercial Moctezuma</td>
<td>Francisco Chang</td>
<td>Mexico</td>
</tr>
<tr id="C">
<td>Ernst Handel</td>
<td>Roland Mendel</td>
<td>Austria</td>
</tr>
<tr id="D">
<td>Island Trading</td>
<td>Helen Bennett</td>
<td>UK</td>
</tr>
</table>
</body>
</html>
添加回答
举报
0/150
提交
取消