title: jquery datatable edit table row data using form
body: <p><a href="https://i.stack.imgur.com/jF6xY.jpg" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/jF6xY.jpg" alt="enter image description here"></a>
  <div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>var tb = $('#example').DataTable();
  
  $('#addRow').on('click', function() {
    var typeName = $("#type option:selected").val();
    var amount = $("#amount").val();
    tb.row.add([typeName, amount]).draw();
  });</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.8.0/jquery.min.js"&gt;&lt;/script&gt;
  &lt;script src="https://cdn.datatables.net/1.10.19/js/jquery.dataTables.min.js"&gt;&lt;/script&gt;
  
  &lt;label&gt;Type&lt;/label&gt;
  &lt;select id="type"&gt;
    &lt;option&gt; Type 01&lt;/option&gt;
    &lt;option&gt; Type 02&lt;/option&gt;
  &lt;/select&gt;
  
  &lt;label&gt;Amount&lt;/label&gt;
  &lt;input type="text" id="amount" /&gt;
  &lt;button id="addRow"&gt; Add &lt;/button&gt;
  
  &lt;table id="example" class="display" cellspacing="0" width="100%"&gt;
    &lt;thead&gt;
      &lt;tr&gt;
        &lt;th&gt;Type&lt;/th&gt;
        &lt;th&gt;Amount&lt;/th&gt;
  
      &lt;/tr&gt;
    &lt;/thead&gt;
  &lt;/table&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>i need to append edit and delete button for every row. when click the edit button, row data should load to dropdown and textbox. can u guide me to do this ?</p>