Sample table editor

Example for http://stackoverflow.com/questions/18895365/recommended-approach-to-implementing-inline-editing-for-a-mvc-grid-please/18897055#18897055

by Viktor Evdokimov

HTML

<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>

CSS

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;
 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; }

Babel + JSX

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))
    })