jQuery按鈕重置為正常形式

Question

jQuery動態字段生成器

| S.No |名稱| Button1 | Button2 |

第一個按鈕單擊S。沒有標簽和名稱標簽應啟用像文本框。

它的工作原理就像魅力，但是如果我單擊第二個按鈕，則該字段是可編輯的，但第一個字段也是可編輯的，不會重置為較早的狀態（以標記）

如果單擊第二個或任何一個按鈕，所有內容將恢復為原始形式

下圖：

jQuery代碼

function asd(dt1)
{
    var id = $("#id"+dt1).text();
    var x ='<input type="text" value="'+id+'" id="txtUpdateSno'+dt1+'" size="1" readonly="readonly">';
    $("#id"+dt1).html(x);

    var name = $("#name"+dt1).text();
    var x ='<input type="text" value="'+name+'" id="txtUpdateName'+dt1+'">';
    $("#name"+dt1).html(x);


    $("#btnEdit"+dt1).hide();
    $("#btnDelete"+dt1).hide();
    $("#trTxtInsert").hide();
    $("#btnUpdate"+dt1).show();
    $("#btnCancel"+dt1).show();
}

Answer 1

如果在用戶嘗試編輯另一行時需要返回不可編輯的數據，則必須做兩件事：

1. 將原始數據存儲在某個地方。
2. 在onClick到另一個編輯按鈕時，您需要觸發“單擊”到處於“編輯模式”的行的“取消”按鈕。

如何緩存原始數據：

在您的td將數據（名稱和ID）插入跨度內，例如：

<td id="id1"><span class="dataCache">8</span></td>
<td id="name1"><span class="dataCache">LLL</span></td>

並且，當用戶單擊“編輯”按鈕時，隱藏此元素並append輸入，而不是使用.html() ：

var id = $("#id"+dt1).text();
$("#id"+dt1).append('<input type="text" value="'+id+'" id="txtUpdateSno'+dt1+'" size="1" readonly="readonly">');
$("#id"+dt1+" .cacheData").hide();

var name = $("#name"+dt1).text();
$("#name"+dt1).html('<input type="text" value="'+name+'" id="txtUpdateName'+dt1+'">');
$("#name"+dt1+" .cacheData").hide(); // edit

如果有人單擊“取消”按鈕，則刪除輸入，並刪除.cacheData元素和.show() 。

為了幫助您重置編輯行，請在您編輯的行上添加一個類：

$("#id"+dt1).parents("tr").addClass("editing");

並在cancel函數中刪除此類。

如何恢復原狀

如果某些用戶在不save或cancel情況下單擊另一行的edit ，則需要強制單擊處於“編輯模式”的行的“取消”按鈕：

• 第一：在所有“取消按鈕”中添加一個通用類，以便在需要時輕松找到它；

• Secondo：在您的asd函數中添加此行，如果存在某些行並單擊“ cancel按鈕，則找到處於edit mode的行。

    $(".editing .yourgeneralclassofcancelbutton").trigger("click"); 

我創建了一個示例，向您展示使用新的HTML和新的JS替代代碼的方法，看看： http : //jsfiddle.net/Frogmouth/rbkxcs47/ 。 （為您提供靈感）

當一個人處於“活動”狀態時，如何禁用其他動作

創建一個例外，控制是否有一些處於“編輯模式”的“ tr”以及是否忽略編輯操作。

function asd(dt1)
{
    if($("tr.editing").length > 0) return false; //some other is in edit mode, do nothing.

    $("#id"+dt1).parents("tr").addClass("editing"); //add editing

    var id = $("#id"+dt1).text();
    $("#id"+dt1).append('<input type="text" value="'+id+'" id="txtUpdateSno'+dt1+'" size="1" readonly="readonly">');
    $("#id"+dt1+" .cacheData").hide();

    var name = $("#name"+dt1).text();
    $("#name"+dt1).html('<input type="text" value="'+name+'" id="txtUpdateName'+dt1+'">');
    $("#name"+dt1+" .cacheData").hide(); // edit

    $("#btnEdit"+dt1).hide();
    $("#btnDelete"+dt1).hide();
    $("#trTxtInsert").hide();
    $("#btnUpdate"+dt1).show();
    $("#btnCancel"+dt1).show();
}

或者，如果您遵循我的小提琴，我將創建一個新的更新版本： http : //jsfiddle.net/Frogmouth/rbkxcs47/1/