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

         },
    };

我需要对第二列和第三列进行内联编辑 - 单击这些字段后，将显示一个下拉框以供选择。点击＆＃39; save＆＃39;，需要保存表格中的所有数据。

Answer 1

以my jsfiddle为例，它不会填充表格，只需编辑/保存它：http://jsfiddle.net/vittore/wgtf6y24/

另外，当状态不是:active时，我宁愿将样式选为简单输入框，并将其设置为:active和:focus的正常选择，以便您的用户能够标签通过您的表格。（参见下面剪辑中的这种样式示例）

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

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表格的内联编辑

1 个答案: