title: How to add row to a bootstrap table using button
body: <p>I am trying to add a row to the table when the add button is clicked and add and delete both buttons are working properly but when i add <strong>data-toggle=&quot;table&quot;</strong> in the table tag the add and delete buttons are not working if i remove the data-toggle option i am losing features such as pagination and table styling</p>
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html lang=&quot;en&quot;&gt;
  &lt;head&gt;
    &lt;meta charset=&quot;UTF-8&quot;&gt;
    &lt;meta name=&quot;viewport&quot; content=&quot;width=device-width, initial-scale=1.0&quot;&gt;
    &lt;title&gt;Document&lt;/title&gt;
    &lt;link rel=&quot;stylesheet&quot; href=&quot;https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css&quot; integrity=&quot;sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk&quot; crossorigin=&quot;anonymous&quot;&gt;
    &lt;link href=&quot;https://cdn.datatables.net/1.10.21/css/dataTables.bootstrap4.min.css&quot; rel=&quot;stylesheet&quot; type=&quot;text/css&quot;&gt;
    &lt;link rel=&quot;stylesheet&quot; href=&quot;https://unpkg.com/bootstrap-table@1.16.0/dist/bootstrap-table.min.css&quot;&gt;
    &lt;link href=&quot;https://fonts.googleapis.com/css2?family=Nunito&amp;display=swap&quot; rel=&quot;stylesheet&quot;&gt;
    &lt;link href=&quot;https://fonts.googleapis.com/css2?family=Montserrat:wght@400&amp;display=swap&quot; rel=&quot;stylesheet&quot;&gt;
    &lt;link href=&quot;https://fonts.googleapis.com/css2?family=Raleway:wght@500&amp;display=swap&quot; rel=&quot;stylesheet&quot;&gt;
  &lt;/head&gt;
  &lt;body&gt;
  
  
    &lt;table id=&quot;myTable&quot;   class=&quot;table&quot;   
    data-toggle=&quot;table&quot;  
    data-mobile-responsive=&quot;true&quot;
    data-pagination=&quot;true&quot;
      
       data-height=&quot;460&quot;
    &gt;
    
    &lt;thead&gt;
        &lt;tr&gt;
            &lt;th&gt;Product&lt;/th&gt;
            &lt;th&gt;QTY&lt;/th&gt;
            &lt;th&gt;Price&lt;/th&gt;
            &lt;th&gt;Total&lt;/th&gt;
            &lt;th&gt;&lt;/th&gt;
        &lt;/tr&gt;
    &lt;/thead&gt;
    &lt;tbody&gt;
        &lt;tr&gt;
            &lt;td &gt;
                &lt;select  id=&quot;ex1&quot; required &gt;
                    &lt;option value=&quot;&quot;&gt;Iphone&lt;/option&gt;
                    &lt;option value=&quot;&quot;&gt;IPod&lt;/option&gt;
                    &lt;option value=&quot;&quot;&gt;Galaxy Tab&lt;/option&gt;
                    &lt;option value=&quot;&quot;&gt;PocoPhone&lt;/option&gt;
                  &lt;/select&gt;
            &lt;/td&gt;
            &lt;td &gt;
                &lt;input  id=&quot;ex2&quot; type=&quot;number&quot;&gt;
            &lt;/td&gt;
            &lt;td &gt;
                &lt;input  id=&quot;ex3&quot; type=&quot;number&quot;&gt;
            &lt;/td&gt;
            &lt;td &gt;
                &lt;input id=&quot;ex4&quot; type=&quot;number&quot;&gt;
            &lt;/td&gt;
            &lt;td &gt;  
                &lt;button   class=&quot;btn btn-outline-success&quot;   id=&quot;addrow&quot; class=&quot;addnew&quot; &gt; Add &lt;/button&gt;
            &lt;/td&gt;
        &lt;/tr&gt;
    &lt;/tbody&gt;
    &lt;/table&gt;
  
  
  &lt;script src=&quot;https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.js&quot;&gt;&lt;/script&gt;
  &lt;script&gt;
     $(document).ready(function() {
         //Try to get tbody first with jquery children. works faster!
       
     var tbody = $('#myTable').children('tbody');
     
     //Then if no tbody just select your table 
     var table = tbody.length ? tbody : $('#myTable');
     
     
     $('#addrow').click(function(){
     //Add row
     table.append('&lt;tr&gt;&lt;td &gt;  &lt;select  id=&quot;ex1&quot;  required &gt;   &lt;option value=&quot;&quot;&gt;Iphone&lt;/option&gt;&lt;option value=&quot;&quot;&gt;IPod&lt;/option&gt;&lt;option value=&quot;&quot;&gt;Galaxy Tab&lt;/option&gt; &lt;option value=&quot;&quot;&gt;PocoPhone&lt;/option&gt; &lt;/select&gt;  &lt;/td&gt;  &lt;td &gt;  &lt;input  id=&quot;ex2&quot; type=&quot;number&quot;&gt;  &lt;/td&gt; &lt;td &gt;&lt;input  id=&quot;ex3&quot; type=&quot;number&quot;&gt; &lt;/td&gt; &lt;td &gt; &lt;input  id=&quot;ex4&quot; type=&quot;number&quot;&gt; &lt;/td&gt; &lt;td &gt;  &lt;button   class=&quot;btnDelete btn-outline-success&quot;   id=&quot;delrow&quot;  &gt;Delete&lt;/button&gt;  &lt;/td&gt;  &lt;/tr&gt;  ');
     })
    
     $(&quot;#myTable&quot;).on('click', '.btnDelete', function () {
      $(this).closest('tr').remove();
  });
  
     });
  
   
  &lt;/script&gt;
  
  &lt;script src=&quot;https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js&quot;&gt;&lt;/script&gt;
  
  &lt;script src=&quot;https://code.jquery.com/jquery-3.5.1.js&quot;&gt;&lt;/script&gt;
  &lt;script src=&quot;https://unpkg.com/bootstrap-table@1.16.0/dist/bootstrap-table.min.js&quot;&gt;&lt;/script&gt;
  &lt;script src=&quot;https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js&quot; integrity=&quot;sha384-OgVRvuATP1z7JjHLkuOU7Xw704+h835Lr+6QL9UvYjZE3Ipu6Tp75j7Bh/kR0JKI&quot; crossorigin=&quot;anonymous&quot;&gt;&lt;/script&gt;
  &lt;script src=&quot;https://unpkg.com/bootstrap-table@1.16.0/dist/extensions/mobile/bootstrap-table-mobile.min.js&quot;&gt;&lt;/script&gt;
  &lt;script src=&quot;https://cdn.datatables.net/1.10.21/js/dataTables.bootstrap4.min.js&quot;&gt;&lt;/script&gt;
  
  
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>