title: Dynamic html table with jQuery
body: <p>How to do dynamic html table on JS <strong>with</strong> jQuery? For example I must have 6 buttons:</p>
  
  <ul>
  <li>Add row to begin table;</li>
  <li>Add row to middle;</li>
  <li>Add row to end;</li>
  <li>Delete first row;</li>
  <li>Delete middle row;</li>
  <li>Delete last row;</li>
  </ul>
  
  <p><strong>UPD:</strong></p>
  
  <p>That's my JS:</p>
  
  <pre><code>$(document).ready(function(){
          $('#addFirstPosition').click(function(){
              var $tr = $('&lt;tr&gt;&lt;td&gt;3&lt;/td&gt;&lt;td&gt;3&lt;/td&gt;&lt;/tr&gt;');
              //var $myTable = $('#myTable');
              //$myTable.append($tr);
              $("#myTable &gt; tbody").append($tr);
          );
          });
  </code></pre>
  
  <p>And this is my html:</p>
  
  <pre><code>&lt;input id="addFirstPosition" type="button" value="AddFirst" /&gt;
  &lt;input id="addMiddlePosition" type="button" value="AddMiddle" /&gt;
  &lt;input id="addLastPosition" type="button" value="AddLast" /&gt;
  &lt;br /&gt;
  &lt;input id="deleteFirstPosition" type="button" value="DelFirst" /&gt;
  &lt;input id="deleteMiddlePosition" type="button" value="DelMiddle" /&gt;
  &lt;input id="deleteLastPosition" type="button" value="DelLast" /&gt;
  &lt;br /&gt;
  &lt;br /&gt;
  &lt;table id="myTable" border="1px"&gt;
      &lt;tbody&gt;
          &lt;tr&gt;
              &lt;td&gt;
                  1
              &lt;/td&gt;
              &lt;td&gt;
                  1
              &lt;/td&gt;
          &lt;/tr&gt;
          &lt;tr&gt;
              &lt;td&gt;
                  2
              &lt;/td&gt;
              &lt;td&gt;
                  2
              &lt;/td&gt;
          &lt;/tr&gt;
      &lt;/tbody&gt;
  &lt;/table&gt;
  </code></pre>
  
  <p>When I click to button, nothing happens.</p>