-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要素がで有効ではないためですtr。そのため、ブラウザは要素を削除しているため、#2セレクターは非表示にするものを何も見つけません。th最善の代替策は、非表示にする必要があるそれぞれにクラスを追加し、 CSSを使用してそれらを非表示にすることです。

フィドルの例

于 2012-10-09T09:36:33.517 に答える
1

<TH>テーブルの真ん中にDIVを導入する代わりに、要素にcssクラスを与えて、それらを非表示にしてみませんか。例：

<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 に答える