jquery按钮重置为正常形式

Question

Jquery动态字段生成器

| S.No |名称| Button1的| Button2的|

点击第一个按钮S.No标签和名称标签应该像文本框一样启用。

它的工作方式就像魅力一样，但如果我点击第二个按钮，该字段是可编辑的，但第一个字段也可以编辑，不会重置为早期状态（标记）

如果点击第二个或任何按钮，则所有内容都会重新显示为原始形式

下图：

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. on onClick到另一个编辑按钮，您需要触发“点击”到处于“编辑模式”的行的取消按钮。

如何缓存原始数据：

在td内插入数据（名称和ID），例如：

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

并且当用户点击“编辑”按钮时隐藏此元素并使用append te输入而不是.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

如果有人点击“取消”按钮，请删除输入并.show() .cacheData元素。

为了帮助您重置编辑行，请在您编辑的行上添加一个类：

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

并在cancel函数中删除此类。

如何返回原始

如果某个用户在没有edit或save的其他行上点击cancel，则需要强制点击“编辑模式”中行的取消按钮：

• 首先：在所有“取消按钮”中添加一个公共类，以便在需要时轻松找到它;

• Secondo：在您的asd函数中添加此行，如果有一些并且强制edit mode按钮单击，则会找到cancel中的行。

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

我创建了一个示例，通过新的HTML和新的JS向您展示代码的替代方案，看看：http://jsfiddle.net/Frogmouth/rbkxcs47/。 （为你的灵感）

如果一个人处于“活动”

，如何禁用其他操作

创建一个例外，控制是否有某些“tr”处于“编辑模式”，如果有一个“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/