Question

I am trying to hide div 2 and div 3.
But it is not working.
it works only after I pull the div out of the table. Can anyone explain to me why?

Script

<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

Assuming you are not using HTML5, id attributes cannot start with numbers. Try using another identifier, such as el2.

Update
Actually, the problem is because div elements are not valid in a tr, so the browser is removing them, hence the #2 selector finds nothing to hide. The best alternative is to add a class to each th you need to hide and use CSS to hide them.

Example fiddle