Question

I have an html form with an input element. Every time I put that form inside table tag
<table><form></form></table>, jQuery selector cannot select the input that’s inside the form.

This is the code :

<script type="text/javascript">
  $(document).ready(function(){
    $("#myForm #textinput1").val("hahaha");
  });   
</script>
<table>
<form name="myForm" id="myForm">
<input type="text" name="textinput1" id="textinput1" />
</form>
</table>

But the following works :

<form name="myForm" id="myForm">
<table><input type="text" name="textinput1" id="textinput1" /></table>
</form>

And the following works too :

<script type="text/javascript">
    $(document).ready(function(){
        $("#textinput1").val("hahaha");
    }); 
</script>
<table>
    <form name="myForm" id="myForm">
    <input type="text" name="textinput1" id="textinput1" />
    </form>
</table>

Answer 1

Firstly, A table cannot contain a form directly.

You can nest the table within the form.

<form>
  <table>
    <tr> <td> My Content </td> </tr>
  <table>
</form>

Or

<table>
    <tr> 
       <td> 
          <form>My Content </form>
       </td> 
    </tr>
 <table>