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 - 一次編輯一行

回答

相關問題