[英]jquery button reset to normal form
Jquery Dynamic fields generator jQuery动态字段生成器
|S.No|Name|Button1|Button2| | S.No |名称| Button1 | Button2 |
first button clicked S.No label and name label should enable like textbox. 第一个按钮单击S。没有标签和名称标签应启用像文本框。
its working like charm but if i click second button that field is editable but the first field also editable not reset as the earlier state (to label) 它的工作原理就像魅力,但是如果我单击第二个按钮,则该字段是可编辑的,但第一个字段也是可编辑的,不会重置为较早的状态(以标记)
if second or any button clicked all things restate to original form 如果单击第二个或任何一个按钮,所有内容将恢复为原始形式
Image below: 下图:
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();
}
if you need return to non editable data when user try to edit an other row you must 2 two thing: 如果在用户尝试编辑另一行时需要返回不可编辑的数据,则必须做两件事:
inside your td
insert the data (name and id) inside a span like: 在您的td
将数据(名称和ID)插入跨度内,例如:
<td id="id1"><span class="dataCache">8</span></td>
<td id="name1"><span class="dataCache">LLL</span></td>
and than when user click on "edit" button hide this element and append
te input instead use .html()
: 并且,当用户单击“编辑”按钮时,隐藏此元素并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
If someone click "cancel" button remove the input and .show()
the .cacheData
element. 如果有人单击“取消”按钮,则删除输入,并删除.cacheData
元素和.show()
。
For helping you in the reset of the editing row add a class on row that you edit: 为了帮助您重置编辑行,请在您编辑的行上添加一个类:
$("#id"+dt1).parents("tr").addClass("editing");
and in the cancel
function remove this class. 并在cancel
函数中删除此类。
if some user click edit
on an other row without save
or cancel
, you need to force the click to the cancel button of the row that are in the "edit mode": 如果某些用户在不save
或cancel
情况下单击另一行的edit
,则需要强制单击处于“编辑模式”的行的“取消”按钮:
Secondo: in your asd
function add this row, that find the row that are in the edit mode
if there are some and force cancel
button click. Secondo:在您的asd
函数中添加此行,如果存在某些行并单击“ cancel
按钮,则找到处于edit mode
的行。
$(".editing .yourgeneralclassofcancelbutton").trigger("click");
I crate an example to show you an alternative to your code with a new HTML and new JS, take a look: http://jsfiddle.net/Frogmouth/rbkxcs47/ . 我创建了一个示例,向您展示使用新的HTML和新的JS替代代码的方法,看看: http : //jsfiddle.net/Frogmouth/rbkxcs47/ 。 (for your inspiration) (为您提供灵感)
Create an exception that control if there are some "tr" that are in "editing mode" and if there is one ignore the edit action. 创建一个例外,控制是否有一些处于“编辑模式”的“ 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();
}
Or, if you follow my fiddle I've create a new updated version: http://jsfiddle.net/Frogmouth/rbkxcs47/1/ 或者,如果您遵循我的小提琴,我将创建一个新的更新版本: http : //jsfiddle.net/Frogmouth/rbkxcs47/1/
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.