Inline editing for HTML table

Question

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('<label class="id">'+ v.id + '</label>');
                  dataArr.push('<select data-val=' + item.course + ' ><option>Science</option><option>Economics</option><option>Literature</option><option>Maths</option><option selected>' + item.course + '</option></select>');   // Here I am getting 2 values for selected option
                  dataArr.push('<input type="text" name="category">' + v.catg + ' </disabled>');
                  dataArr.push('<label class="name">'+ v.name + '</label>');
                  $('#table_contact > tbody:first').append('<tr><td>' + dataArr.join('</td><td>') + '</td></tr>');
              });

         },
    };

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.

Solution

Check my jsfiddle as example, it doesn't take care of populating the table, just edit/save it: http://jsfiddle.net/vittore/wgtf6y24/

Also, I would rather style select as simple input box when state is not :active and style it as normal select for :active and :focus so your users will be able to tab through your table. (see example of such styling in snipped below)

We initially did table like that, where you need to click on table cell to edit it, it is pain in the neck for users.

var t = $('table'), inputs = t.find('input, select'), b = $('button'), ta = $('#save')

t.on('change', 'input, select', (e) => {
      $el = $(e.target)
      $el.data('val', $el.val())
      console.log($el.val())
})

b.on('click', () => {
  	var data = []
  	inputs.each((i,inp) => data.push($(inp).data()) )
	ta.text(JSON.stringify(data))
})

input {border : 1px solid #fff;margin:0; font-size:20px; }
input:focus,input:active,input:hover { outline: 1px solid #eee; background-color:#eee; }
select { border: 1px solid #fff; margin:0; padding:0; font-size:20px; border:0; 
   -webkit-appearance: none;
   -moz-appearance: none;
}

table { border : 1px solid #999; border-collapse:collapse;border-spacing:0; }
table td { padding:0; margin:0;border:1px solid #999; }
table th { background-color: #aaa; min-width:20px;border:1px solid #999; }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
    <tr>
        <th></th>
        <th>A</th>
        <th>B</th>
        <th>C</th>
    </tr>
    <tr data-row="0">
        <th>1</th>
        <td><input disabled type="text" data-row="0" data-col="0" data-val="a" value="a" /></td>
        <td>
<select data-row="0" data-col="1" data-val="yes"><option>yes</option><option>no</option></select></td>
        <td><input type="text" data-row="0" data-col="2" data-val="c" value="c" /></td>
    </tr>
    <tr data-row="1">
        <th>2</th>
        <td><input disabled type="text" data-row="1" data-col="0" data-val="d" value="d" /></td>
        <td><select data-row="1" data-col="1" data-val="no"><option>yes</option><option selected>no</option></select></td>
        <td><input type="text" data-row="1" data-col="2" data-val="f" value="f" /></td>
    </tr>
    <tr data-row="2">
        <th>3</th>
        <td><input disabled type="text" data-row="2" data-col="0" data-val="g" value="g" /></td>
        <td><select data-row="2" data-col="1" data-val="no"><option>yes</option><option selected>no</option></select></td>
        <td><input type="text" data-row="2" data-col="2" data-val="i" value="i" /></td>
    </tr>
</table>

<div name="data" id="save" cols="30" rows="10"></div>
<button>Save</button>