HTML表的內聯編輯

Question

我有以下顯示表的jQuery函數。

$(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>');
              });

         },
    };

我需要對第二列和第三列進行內聯編輯-單擊這些字段后，它將顯示一個下拉框以供選擇。 然后單擊“保存”，它需要保存表中的所有數據。

Answer 1

以我的jsfiddle為例，它不需要填寫表格，只需編輯/保存即可： http : //jsfiddle.net/vittore/wgtf6y24/

另外，我寧願選擇款式簡單的輸入框時狀態不是:active和風格它作為正常的選擇:active和:focus所以你的用戶將能夠使用TAB鍵的表。 （請參見下面的此類樣式示例）

最初，我們像這樣制作表格，您需要在表格單元格上單擊以對其進行編輯，這對用戶來說是不小的麻煩。

 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>