Question

我正在尝试隐藏div 2和div 3。但它没有用。它只有在我将div拉出桌子后才能工作。任何人都可以向我解释原因吗？

脚本

<script>
        $(document).ready(function(){
            $("#2").hide();
            $("#3").hide();
            });
</script>

HTML

  <div align="center">
  <table width="10%" border="0" cellspacing="0" cellpadding="0">
    <tr>
      <th scope="row"><table width="100%" border="0" cellspacing="0" cellpadding="0">
        <tr>
        <div id = "1">
          <th><input type = "button" value = "1.1" ></th>
          <th><input type = "button" value = "1.2" ></th>
          <th><input type = "button" value = "1.3" ></th>
        </div>
        <div id = "2">
            <th><input type = "button" value = "2.1" ></th>
            <th><input type = "button" value = "2.2" ></th>
            <th><input type = "text" value = "2.3" ></th>
        </div>
        <div id = "3">
            <th><input type = "button" value = "3.1" ></th>
            <th><input type = "button" value = "3.2" ></th>
        </div>
        </tr>
      </table></th>
    </tr>
  </table>
</div>

Answer 1

假设您没有使用HTML5，id属性不能以数字开头。尝试使用其他标识符，例如el2。

更新
实际上，问题是因为div元素在tr中无效，因此浏览器会删除它们，因此#2选择器找不到任何隐藏的内容。最好的选择是为每个需要隐藏的th添加一个类，并使用CSS来隐藏它们。

Example fiddle

Answer 2

为什么不给<TH>元素一个css类并隐藏它们，而不是在表格中间引入DIV，例如：

<script>
    $(document).ready(function(){
        $(".th2").hide();
        $(".th3").hide();
        });
</script>

HTML

<div align="center">
<table width="10%" border="0" cellspacing="0" cellpadding="0">
<tr>
  <th scope="row"><table width="100%" border="0" cellspacing="0" cellpadding="0">
    <tr>
      <th class="th1"><input type = "button" value = "OP / FE" ></th>
      <th class="th1"><input type = "button" value = "LS" ></th>
      <th class="th1"><input type = "button" value = "FLX" ></th>
      <th class="th2"><input type = "button" value = "2.1" ></th>
      <th class="th2"><input type = "button" value = "2.2" ></th>
      <th class="th2"><input type = "text" value = "2.3" ></th>
      ...
    </tr>
  </table></th>
</tr>
</table>
</div>

Answer 3

Please change Div to table and add jqury.js link  to page and test it :
<head>
<title></title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript">
    $(function () {

        $("#div2").hide();
        $("#div3").hide();
    });
</script>

</head>

<body>
    <div align="center">
  <table width="10%" border="0" cellspacing="0" cellpadding="0">
    <tr>
      <th scope="row"><table width="100%" border="0" cellspacing="0" cellpadding="0">
        <tr>
        <table id = "div1">
          <th><input type = "button" value = "1.1" ></th>
          <th><input type = "button" value = "1.2" ></th>
          <th><input type = "button" value = "1.3" ></th>
        </table>
        <table id = "div2">
            <th><input type = "button" value = "2.1" ></th>
            <th><input type = "button" value = "2.2" ></th>
            <th><input type = "text" value = "2.3" ></th>
        </table>
        <table id = "div3">
            <th><input type = "button" value = "3.1" ></th>
            <th><input type = "button" value = "3.2" ></th>
        </table>
        </tr>
      </table></th>
    </tr>
  </table>
</div>
</body>

</html>

在表格中隐藏div

3 个答案: