Javascript jQuery隐藏了错误的表_Javascript_Jquery_Html

Javascript jQuery隐藏了错误的表

javascript jquery html

Javascript jQuery隐藏了错误的表,javascript,jquery,html,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

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

隐藏的是类，而不是ID。每个表都使用类，这就是隐藏所有表的原因
将jQuery选择器更改为绑定到要隐藏的表的id，并且只有该表将被隐藏
要隐藏第一个表和第二个表，可以同时选择这两个表
$("#t1, #t2").hide();

或者创建一个可以重用的类，称为“hidable”，并显示/隐藏它。然后，您可以将该类应用于希望应用该行为的表
$(".hideable").hide();

<table id='t1' align='center' class='tables hideable'>
*********TABLE 1***************
</table>
<table id='t2' align='center' class='tables hideable'>
*********TABLE 2***************
</table>

$（“.hidable”）.hide（）；
*********表1***************
*********表2***************
向希望永久可见的表中添加一个类：

将JQuery选择器更改为：
$（“.tables:not（.no_hide）”）.hide（）
将类添加到您不想隐藏的表中，并使用css。而不是选择器

代码：
HTML:
CSS:
$（“.tables”）.hide（）；将隐藏tables类的任何内容。在id上隐藏或使用特定类！使用CSS将表隐藏到适当的表中。您的HTML格式不正确。@davebrian即使我将该表放入另一个类或没有类，它仍然隐藏在
之外的一个表中，没有起始
标记？表中没有，这似乎完全无效，因为这是一种不好的做法。它还将绑定到将来创建的所有表，而隐藏这些表可能不是目的。最好绑定到您要隐藏的实际表，而不是只隐藏除一个之外的所有表，这是不可靠的。问题中没有任何与未来创建的表相关的内容。这是非常棒的，当表1和表2隐藏在Load上时，如何显示表x这是我用来解决问题的代码，但是我没有注释：display:none；并添加了：#none{display:table}，它让表x在开始时加载，另外两个隐藏
$('.tables:not(#none)').hide();

<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>

$(document).ready(function(){
    $("#myDropdown").change(function(){
        target = $(this).val();
        $(".tables:not(.no-hide-please)").hide();
        if(target != 'none'){
            $("#" + target).show();
        }           
    });
});

table{
    width:100%;
    //display:none;
}
#content{
    width:100%;
}