我有一个输入表,我可以在双击时激活和停用。现在这个输入已经预先填充了来自 DB 的一些数据。因为用户必须按下按钮才能在双击输入并更改后更新数据库,所以我想存储输入的值,以防用户决定在更改后单击另一个单元格而不按下按钮我然后可以替换原始未发送的值。我正在使用 jquery 来执行此 attr 切换以只读更改输入,但我对 jquery 的了解有限,无法实现我想要的。这是一些示例代码
谢谢
我有一个输入表,我可以在双击时激活和停用。现在这个输入已经预先填充了来自 DB 的一些数据。因为用户必须按下按钮才能在双击输入并更改后更新数据库,所以我想存储输入的值,以防用户决定在更改后单击另一个单元格而不按下按钮我然后可以替换原始未发送的值。我正在使用 jquery 来执行此 attr 切换以只读更改输入,但我对 jquery 的了解有限,无法实现我想要的。这是一些示例代码
谢谢
如果我理解这个问题,您希望在用户修改数据之前存储数据,如果用户不保存他们所做的更改,则将数据带回。
如果我正确理解了这个问题,我会使用$.data()来维护旧值。它本质上允许您将键值对保留在 html 元素中,因此为输入保留字符串备份相当容易。将此添加到 dblClick 以备份值:
$input.data("backup", $input.val());
并添加它以将其恢复为原始值:
function backup ($input) {
$input.val($input.data('backup'));
}
奇迹般有效 ..
每行(tr)都有自己的缓存变量
编辑一个输入时……它的初始值被缓存在它的父 tr 缓存变量中。如果编辑另一个输入,则第一个输入将恢复其原始值。
$(function(){
// jQ 1.7 for on method
$('table tr').data('bak',{$node:null, value:''}).on('dblclick', 'input[type="text"]', function(e){
var $input = $(this),
$tr = $input.closest('tr'),
data = $tr.data('bak');
// No input yet edited on this tr/line OR same
if(! data.$node ){
$input
.toggleClass("active")
.prop('readonly', false);
$tr.data('bak',{$node:$input, value:$input.val()});
} else if($input.attr('id') != data.$node.attr('id')){
data.$node
.toggleClass("active")
.prop('readonly', true);
// restore initial value for the previous clicked input
data.$node.val(data.value);
// backup bak with the new input double clicked and it's value
$input
.toggleClass("active")
.prop('readonly', false);
$tr.data('bak',{$node:$input, value:$input.val()});
}
return false;
});
});
不确定我是否完全理解你的问题。也许这样的功能应该满足您的需求:
function toggleReadonly(o, force) {
if (force != undefined) { //Force state: true: readonly, false: modifiable
if (force) o.attr('readonly', 'readonly');
else o.removeAttr('readonly');
} else { //Toggle current state
if (o.attr('readonly') == undefined) o.attr('readonly', 'readonly');
else o.removeAttr('readonly');
}
}
//...
toggleReadonly($(this)); //simply toggle
toggleReadonly($(this), true); //set readonly
toggleReadonly($(this), false); //set modifiable
我也是Jquery的初学者。您可以尝试将输入放入某个变量中,例如
var item = this.value;
在您的代码中,按钮在哪里?