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/