Question

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

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

Answer 1

您根据班级隐藏，而不是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>

Answer 2

将类添加到您希望永久显示的表中：

<table id='none' class='tables no_hide' width='100%'>

将JQuery选择器更改为：

$(".tables:not(.no_hide)").hide();

Answer 3

将类添加到您不想隐藏的表并使用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%;
}

Answer 4

$('.tables:not(#none)').hide();

jQuery隐藏了错误的表

4 个答案: