Jquery - 一次编辑一行

看起来很简单。我试图使用jQuery来获得一个编辑表。我遇到的问题是一次只允许编辑一行。目前它是免费的，这意味着你可以一次编辑多行，这不是我所需要的。Jquery - 一次编辑一行

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

这是遇到问题的代码IM：

$(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})); 
    } 
});

有谁知道我错过了什么？

来源

2016-02-13 Daniel Ellison

不是真的，你问清楚是什么。您想要在正在编辑的其他行中禁用编辑？ – charlietfl

对不起，我只是想限制一行，一次编辑。 –

无数的方式来做到这一点，可以设置一个标志或通过并禁用其他按钮。国旗将是最简单的 – charlietfl

我编辑了你在问题中提出的小提琴。在这里你可以编辑每行。并点击保存按钮保存并取消以回滚到初始值。

$('#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() { 
 
     \t \t $(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>

来源

2016-02-14 03:54:30 Transformer

真棒，这很好，非常感谢你。 –

很高兴帮助，但虽然取消按钮给了我艰难的时间 – Transformer

这个最简单的解决办法是不加：

$('#tbl').find('cancel').click();

您$('#tbl').on('click', '.edit', function(){...})处理器内部。这会找到当前显示的任何取消按钮并点击它们。

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

来源

2016-02-13 22:55:43

Jquery - 一次编辑一行

回答

相关问题