title: How to add rows in HTML Table using Jquery?
body: <p>I want to add rows dynamically at runtime using Jquery. At beginning table don't have any records. When user click the <code>ADD Button</code> it has to add the rows. 
  <a href="https://i.stack.imgur.com/SzAPw.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/SzAPw.png" alt="Watch this picture"></a></p>
  
  <p>When user click <strong>ADD Button</strong> the operator dropdown list box value and Filter values should add in that table row.</p>
  
  <p>Here what I tried
  <strong>Jquery CODE</strong></p>
  
  <pre><code>$("#btnAdd").click(function () {
  
     // $("#queryTable tr:last").after("&lt;tr&gt;...&lt;/tr&gt;&lt;tr&gt;...&lt;/tr&gt;");
      $('#queryTable &gt; tbody:last-child').append('&lt;tr&gt;Record1&lt;/tr&gt;&lt;tr&gt;Record2&lt;/tr&gt;');
  });
  </code></pre>
  
  <p>I tried both lines. But it doesn't make any sense.
  Thanks</p>
  
  <p><strong>HTML Code</strong></p>
  
  <pre><code> &lt;table class="table table-hover " id="queryTable"&gt;
       &lt;thead&gt;
           &lt;tr&gt;
               &lt;th&gt;Field Name&lt;/th&gt;
               &lt;th&gt;Values&lt;/th&gt;
           &lt;/tr&gt;
       &lt;/thead&gt;
       &lt;tbody&gt;
           &lt;tr&gt;
               &lt;td&gt;Mark&lt;/td&gt;  //Please ignore these two records. At beginning the table will be empty
               &lt;td&gt;Otto&lt;/td&gt;
           &lt;/tr&gt;
           &lt;tr&gt;
               &lt;td&gt;Jacob&lt;/td&gt;
               &lt;td&gt;Thornton&lt;/td&gt;
           &lt;/tr&gt;
       &lt;/tbody&gt;
   &lt;/table&gt;
  </code></pre>