我正在使用一些代码隐藏/显示表格。一切都很好,除了我找不到如何阻止所有表格受此代码影响。我有表1,表2和表X,我希望表X始终存在,但是我无法想象如何做到这一点。
<!DOCTYPE HTML">
<html>
<head>
<link rel="stylesheet" type="text/css"/>
<title>Add device</title>
<script src="http://code.jquery.com/jquery-1.10.1.min.js"></script>
<script type="text/javascript">
\$(document).ready(function(){
\$("#myDropdown").change(function(){
target = \$\(this\).val();
\$(".tables").hide();
if(target != 'none'){
\$("#" + target).show();
}
return false;
});
});
</script>
<style type="text/css">
table{
width:100%;
display:none;
}
#content{
width:100%;
}
</style>
</head>
<table id='none' class='tables' width='100%'>
<tr>
<td>**********TABLE X***********</td>
</tr>
</table>
<body>
<div id="content">
<p align = 'center'>
Are you adding a chassis or a module?</br>
<select id="myDropdown">
<option selected value="t3">Please Select</option>
<option value="t1">Chassis</option>
<option value="t2">Module</option>
</select>
</p>
<table id='t1' align='center' class='tables'>
*********TABLE 1***************
</table>
<table id='t2' align='center' class='tables'>
*********TABLE 2***************
</table>
</form>
</body>
</html>
我尝试过上课,而且没有用。
答案 0 :(得分:0)
您根据班级隐藏,而不是ID。该表用于每个表,这就是为什么所有表都被隐藏的原因。
更改jQuery选择器以绑定到要隐藏的表的id,并且只隐藏那个。
要隐藏第一个和第二个表,您可以同时选择它们。
$("#t1, #t2").hide();
或者创建一个可以重复使用的类叫做&#34; hidable&#34;并显示/隐藏。然后,您可以将该类应用于您希望应用该行为的表。
$(".hideable").hide();
<table id='t1' align='center' class='tables hideable'>
*********TABLE 1***************
</table>
<table id='t2' align='center' class='tables hideable'>
*********TABLE 2***************
</table>
答案 1 :(得分:0)
将类添加到您希望永久显示的表中:
<table id='none' class='tables no_hide' width='100%'>
将JQuery选择器更改为:
$(".tables:not(.no_hide)").hide();
答案 2 :(得分:0)
将类添加到您不想隐藏的表并使用css .not
选择器。
代码:
HTML:
<table id='none' class='tables no-hide-please' width='100%'>
<tr>
<td>**********TABLE X***********</td>
</tr>
</table>
<div id="content">
<p align = 'center'>
Are you adding a chassis or a module?</br>
<select id="myDropdown">
<option selected value="t3">Please Select</option>
<option value="t1">Chassis</option>
<option value="t2">Module</option>
</select>
</p>
<table id='t1' align='center' class='tables'>
<tr>
<td>*********TABLE 1***************</td>
</tr>
</table>
<table id='t2' align='center' class='tables'>
<tr>
<td>*********TABLE 2***************</td>
</tr>
</table>
JS:
$(document).ready(function(){
$("#myDropdown").change(function(){
target = $(this).val();
$(".tables:not(.no-hide-please)").hide();
if(target != 'none'){
$("#" + target).show();
}
});
});
CSS:
table{
width:100%;
//display:none;
}
#content{
width:100%;
}
答案 3 :(得分:-1)
$('.tables:not(#none)').hide();