jQuery隐藏了错误的表

时间:2014-06-25 12:18:39

标签: javascript jquery html

我正在使用一些代码隐藏/显示表格。一切都很好,除了我找不到如何阻止所有表格受此代码影响。我有表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>

我尝试过上课,而且没有用。

4 个答案:

答案 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选择器。

Link to fiddle

代码:

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();