title: Refresh html Editable table on adding new rows - Bootstable
body: <p>I use the boostable plugin to edit HTML rows inline on runtime. The plugin is on <a href="https://www.jqueryscript.net/table/Editable-Tables-jQuery-Bootstrap-Bootstable.html" rel="nofollow noreferrer">https://www.jqueryscript.net/table/Editable-Tables-jQuery-Bootstrap-Bootstable.html</a>. The problem is now when I want to dynamically add new rows to the table, I am not able to re-initialize the table or refresh so as to make all rows Bootstable(editable)</p>
  <p>After adding /assets/plugins/editable/bootstable.js">
  The following code is the one I use ti initialize the table</p>
  <pre><code>$('#tbl_deposists').SetEditable({
      columnsEd: &quot;1&quot;,
      onEdit: function() {}, 
      onDelete: function() {}, 
      onBeforeDelete: function() {},
      onAdd: function() {} 
  });
  </code></pre>
  <p>The following code is the one I use to add extra rows on runtime</p>
  <pre><code>$(&quot;#add_deposit&quot;).click(function(){
              var name = $(&quot;#deposit_name&quot;).val();
              var amount = $(&quot;#deposit_amount&quot;).val();
              var markup = &quot;&lt;tr&gt;&lt;td&gt;&quot; + name + &quot;&lt;/td&gt;&lt;td class='text-right'&gt;&quot; + amount + &quot;&lt;/td&gt;&lt;/tr&gt;&quot;;
              $(&quot;#tbl_deposists tbody&quot;).append(markup);          
          });
  </code></pre>