-1

我试图隐藏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>
4

3 回答 3

2

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

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

示例小提琴

于 2012-10-09T09:36:33.517 回答
1

你为什么不给<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>
于 2012-10-09T09:41:01.083 回答
0 
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>
于 2012-10-09T09:46:49.167 回答