html inline-table,javascript - Inline editing for HTML table - Stack Overflow

I have following jquery function that displays table.

$(function() {

$("#table-contact > tbody").html("");

$.ajax({

"url" : '/Contact/' + id,

type: 'GET',

success: function(data) {

$.each(data.details, function(k, v) {

var dataArr = new Array();

dataArr.push(''+ v.id + '');

dataArr.push('ScienceEconomicsLiteratureMaths' + item.course + ''); // Here I am getting 2 values for selected option

dataArr.push('' + v.catg + ' ');

dataArr.push(''+ v.name + '');

$('#table_contact > tbody:first').append('

' + dataArr.join('') + '');

});

},

};

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.