title: How to add rows dynamically by using jquery
body: <p>How to add the row and column to the middle by using jquery?</p>
  
  <p>I want add the rows when I click on add new button in the table.</p>
  
  <p>And I want to remove the that row when I click on remove button.</p>
  
  <p>please check the jquery function in that.</p>
  
  <pre><code>&lt;tr&gt;
      &lt;td&gt;Education&lt;/td&gt; 
      &lt;td&gt;&lt;/td&gt;
      &lt;td&gt;&lt;/td&gt;
      &lt;td&gt;&lt;/td&gt;
  &lt;/tr&gt; 
  &lt;tr&gt;
      &lt;td&gt;School Name&lt;/td&gt;
      &lt;td&gt;Degree/Diploma&lt;/td&gt;
      &lt;td&gt;Field(s)of Study &lt;/td&gt;
      &lt;td&gt;Date of Completion &lt;/td&gt;
  &lt;/tr&gt;
  &lt;br&gt;
  &lt;tr id="gradingMaster"&gt;
      &lt;td&gt; 
          &lt;input type="text" id="firstname1" name="" maxlength="200" class="input-large" style="height:27px; " value="${param.firstname}" onblur="letterOnly(this);" onfocus="this.value;"/&gt;          
          &lt;p id="firstname" style="color: red"/&gt;
          &lt;html:errors property="firstname"/&gt;
      &lt;/td&gt;
      &lt;td&gt; 
          &lt;input type="text" id="firstname1" name="" maxlength="200" class="input-large" style="height:27px; " value="${param.firstname}" onblur="letterOnly(this);" onfocus="this.value;"/&gt;          
          &lt;p id="firstname" style="color: red"/&gt;
          &lt;html:errors property="firstname"/&gt;
      &lt;/td&gt;
      &lt;td&gt; 
          &lt;input type="text"  class="input-large datepicker" style="height:27px;" readonly="true" id="datepicker3" name="dateofjoining"  value="${param.dateofjoining}"/&gt;
          &lt;html:errors property="dateofjoining"/&gt;
      &lt;/td&gt;
      &lt;td&gt;  
          &lt;input type="text"  class="input-large datepicker" style="height:27px;" readonly="true" id="datepicker3" name="dateofjoining"  value="${param.dateofjoining}"/&gt;
          &lt;html:errors property="dateofjoining"/&gt;&lt;/td&gt;
      &lt;/tr&gt; 
      &lt;tr id="education1321232"&gt;&lt;/tr&gt;
      &lt;tr&gt;
          &lt;td&gt;
             &lt;button type="button" class="btn btn-info" id="addneweducation"&gt;Add New&lt;/button&gt;
          &lt;/td&gt;
      &lt;/tr&gt; 
    &lt;/tbody&gt; 
  </code></pre>
  
  <p><strong>Jquery</strong></p>
  
  <pre><code>$(document).ready(function() { alert(4); var c = 1; $("#addneweducation").click(function() { alert(12); // $('#myTable').find('tbody:last') // var newtr = $(document.createElement('tr')); $('
  &lt;tr&gt;some more HTML here&lt;/tr&gt;').appendTo('tbody'); // var table = document.getElementById("education1321232"); // var rowCount = table.rows.length; // var row = table.insertRow(rowCount); // alert(rowCount); // row.append('
  &lt;td&gt;
    &lt;input type="text" name="" maxlength="200" class="input-large" style="height:27px; " /&gt;
  &lt;/td&gt;'); //// // row.append('
  &lt;td&gt;
    &lt;input type="text" name="" maxlength="200" class="input-large" style="height:27px; " /&gt;
  &lt;/td&gt;'); // row.append('
  &lt;td&gt;
    &lt;input type="text" name="" maxlength="200" class="input-large" style="height:27px; " /&gt;
  &lt;/td&gt;'); // row.append('
  &lt;td&gt;
    &lt;input type="text" name="" maxlength="200" class="input-large" style="height:27px; " /&gt;
  &lt;/td&gt;'); // ++c; // row.appendChild("#employeetable"); // ('#employeetable').find('tbody:last').appendTo("#employeetable tbody"); }); });
  </code></pre>