Question

我有一个输入表，我会在双击时激活和取消激活。现在，此输入预先填充了来自DB的一些数据。因为用户必须按一个按钮以便在双击输入并更改后更新数据库，我想存储输入的值，以防万一用户决定在更改后单击另一个单元格而不按下按钮I然后可以替换原始未发送的值。我正在使用jquery来执行此attr切换以更改输入readonly但我在jquery中的知识是有限的，以实现我想要的。Here is some example code

由于

Answer 1

如果我理解了这个问题，那么您希望在用户修改数据之前存储数据，并在用户不保存所做的更改时将数据恢复。

如果我正确理解了问题，我会使用$.data()来维护旧值。它本质上允许您将键值对保存在html元素中，因此为输入保留字符串备份相当容易。将其添加到dblClick以备份值：

$input.data("backup", $input.val());

并添加此项以将其恢复为原始值：

function backup ($input) {
  $input.val($input.data('backup'));
}

Answer 2

像魅力一样......

每一行（tr）都有自己的缓存var

当编辑一个输入时...它的引物值得到了它的父tr缓存var。如果编辑另一个输入，则第一个输入会返回原始值。

$(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;
    });
});

Answer 3

我也是Jquery的初学者。您可以尝试将输入放在某个变量中，如

var item = this.value;

在你的代码里，按钮在哪里？

Answer 4

不确定我是否完全理解您的问题。也许像这样的函数应该做你需要的：

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进行Attr切换

4 个答案: