HTML table 的内联编辑

Question

我有以下 jquery 函数显示 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>');
              });

         },
    };

我需要对第 2 和第 3 列进行内联编辑 - 单击这些字段后，它会显示一个 select 的下拉框。在点击 'save' 时，它需要保存 table.

中的所有数据

Answer 1

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

此外，当状态不是 :active 时，我宁愿将 select 样式设置为简单的输入框，并将 :active 和 :focus 设置为正常的 select ] 这样您的用户就可以通过您的 table tab。（请参阅下面截图中的此类样式示例）

我们最初是这样table的，需要点击table单元格进行编辑，这对用户来说很痛苦。

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>

HTML table 的内联编辑

Inline editing for HTML table

html

javascript

jquery

html-table

inline-editing