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

我编辑了你在问题中提供的小提琴。在这里你可以编辑每一行。然后单击“保存”按钮保存并取消以回滚到初始值。

$('#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>

Answer 2

最简单的解决方案是添加：

**/TEST-*.xml

在$('#tbl').find('cancel').click();处理程序内部。这将找到当前显示的任何取消按钮并单击它们。

现在，点击取消按钮的行为似乎已被打破，但这是一个单独的问题。

Jquery - 一次编辑一行

2 个答案: