HTML表格的行内编辑

Question

HTML表格的行内编辑

javascriptjqueryhtmlhtml-tableinline-editing

3

我有以下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>');
              });

         },
    };

我需要对第二和第三列进行内联编辑 - 点击这些字段时，它将显示一个下拉框以进行选择。并在点击“保存”后，需要保存表中的所有数据。

- Futuregeek

1

您在第二和第三列中有标签，这使其无法编辑！ - MarmiK

我需要将它制作成文本字段或其他吗？ - Futuregeek

是的，就是这样！默认情况下使其不可编辑，一旦单击它，使其可编辑！ - MarmiK

使用方法如下：<input type="text" name="lname" disabled/>。 - MarmiK

我认为我的解释有些问题，它应该是这样的 <input type="text" name="lname" disabled> + xyz+ </input>；但无论如何，现在Virrote的解决方案已经适用于你，这不会有太大的影响 :) - MarmiK

谢谢MarmiK。我需要继续帮助。你能帮我吗？- http://stackoverflow.com/questions/32111454/retrieve-only-the-fields-that-are-modified-from-html-table - Futuregeek

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- vittore · Accepted Answer

请查看我的jsfiddle作为示例，它没有负责填充表格，只需编辑/保存即可：http://jsfiddle.net/vittore/wgtf6y24/ 此外，当状态不是:active时，我更喜欢将“select”样式设置为简单的输入框，并在: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>