title: Inline editing for HTML table
body: <p>I have following jquery function that displays table.</p>
  
  <pre><code>$(function() {
      $("#table-contact &gt; tbody").html("");
      $.ajax({
              "url" : '/Contact/' + id,
               type: 'GET',
               success: function(data) {
               $.each(data.details, function(k, v) {
                    var dataArr = new Array();
                    dataArr.push('&lt;label class="id"&gt;'+ v.id + '&lt;/label&gt;');
                    dataArr.push('&lt;select data-val=' + item.course + ' &gt;&lt;option&gt;Science&lt;/option&gt;&lt;option&gt;Economics&lt;/option&gt;&lt;option&gt;Literature&lt;/option&gt;&lt;option&gt;Maths&lt;/option&gt;&lt;option selected&gt;' + item.course + '&lt;/option&gt;&lt;/select&gt;');   // Here I am getting 2 values for selected option
                    dataArr.push('&lt;input type="text" name="category"&gt;' + v.catg + ' &lt;/disabled&gt;');
                    dataArr.push('&lt;label class="name"&gt;'+ v.name + '&lt;/label&gt;');
                    $('#table_contact &gt; tbody:first').append('&lt;tr&gt;&lt;td&gt;' + dataArr.join('&lt;/td&gt;&lt;td&gt;') + '&lt;/td&gt;&lt;/tr&gt;');
                });
  
           },
      };
  </code></pre>
  
  <p>I need to do inline editing for 2nd and third column - upon clicking these fields, it will display a dropdown box to select. And on clicking 'save', it needs to save all the data from the table.</p>
  
  <p><a href="https://i.stack.imgur.com/UJcb9.jpg" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/UJcb9.jpg" alt="enter image description here"></a></p>