Jquery - 一次编辑一行

Question

看起来很简单。我正在尝试使用 jQuery 获取 editbale 表。我遇到问题，一次只允许编辑一行。目前它对所有人免费，这意味着您可以一次编辑多行，这不是我需要的。

我在这里重新创建了一个示例。 http://jsfiddle.net/D44Bp/5/

这是我遇到问题的代码:

$(this).closest('td').siblings().each(        
function(){
    var inp = $(this).find('input');
    if (inp.length){
        $(this).text(inp.val());
    }
    else {
        var t = $(this).text();
        $(this).html($('<input />',{'value' : t}));
    }
});

有人知道我错过了什么吗？

Answer 1

我编辑了你在问题中给出的 fiddle 。在这里您可以编辑每行。点击保存按钮保存，取消则回滚到初始值。

$('#tbl').find('.save, .cancel').hide();
$('#tbl').on('click', '.edit', function(){
    $('#tbl').find('.save, .cancel').hide();
    $('#tbl').find('.edit').show();
    $('*').prop('contenteditable', false)
    $(this).hide().siblings('.save, .cancel').show();
      currentTD = $(this).closest('td').siblings()
      $.each(currentTD, function () {
      		$(this).attr("initialval", $(this).text())
          $(this).prop('contenteditable', true)
      });
});

$('#tbl').on('click', '.save', function() {
    var $btn = $(this);
    $('#tbl').find('.save, .cancel').hide();
    $btn.hide().siblings('.edit').show();
    currentTD = $(this).closest('td').siblings()
    $.each(currentTD, function () {
        $(this).prop('contenteditable', false)
    });
});

$('#tbl').on('click', '.cancel', function() {
    var $btn = $(this);
    $('#tbl').find('.save, .cancel').hide();
    $btn.hide().siblings('.edit').show();
    currentTD = $(this).closest('td').siblings()
    $.each(currentTD, function () {        
        $(this).text($(this).attr("initialval"));
        $(this).prop('contenteditable', false)
    });
});

<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
<table id="tbl" class="table">
  <tr>
    <td class="field1s">field1x</td>
    <td class="field2s">field2x</td>
    <td class="field3s">field3x</td>
    <td class="field4s">field4x</td>
    <td><button type="button" id="edit" class="edit btn btn-success">Edit</button>
    <button type="button" id="edit" style="display:none" class="save btn btn-primary">Save</button>
    <button type="button" id="edit" style="display:none" class="cancel btn btn-danger">Cancel</button></td>
  </tr>

    <tr>
    <td class="field1s">field1x</td>
    <td class="field2s">field2x</td>
    <td class="field3s">field3x</td>
    <td class="field4s">field4x</td>
    <td><button type="button" id="edit" class="edit btn btn-success">Edit</button>
    <button type="button" id="edit" style="display:none" class="save btn btn-primary">Save</button>
    <button type="button" id="edit" style="display:none" class="cancel btn btn-danger">Cancel</button></td>
  </tr>
  
    <tr>
    <td class="field1s">field1x</td>
    <td class="field2s">field2x</td>
    <td class="field3s">field3x</td>
    <td class="field4s">field4x</td>
    <td>
    <button type="button" id="edit" class="edit btn btn-success">Edit</button>
    <button type="button" id="edit" style="display:none" class="save btn btn-primary" >Save</button>
    <button type="button" id="edit" style="display:none" class="cancel btn btn-danger" >Cancel</button>
    </td>
  </tr>  
</table>