Question

jquery双击事件,双击表格变为可编辑

求js代码，想要双击时，让表格的“手续费”列呈可编辑状态，失去焦点时修改成功，并获取所修改行的id等值

Answer 1

$("table 手续费td").dbclick(function(){
    var td = $(this);
    // 根据表格文本创建文本框 并加入表表中--文本框的样式自己调整
    var text = td.text();
    var txt = $("<input type='text'>").val(text);
    txt.blur(function(){
        // 失去焦点，保存值。于服务器交互自己再写,最好ajax
        var newText = $(this).val();
        
        // 移除文本框,显示新值
        $(this).remove();
        td.text(newText);
    });
    td.text("");
    td.append(txt);
});

Answer 2

$('table#aijquery').on("dblclick","td",function(){
    var $td=$(this);    //获取被双击的td单元格
    var _t=$td.text();  //被双击的td单元格里的文本内容
    var _w=$td.width(); //被双击的td单元格的宽度
    var _h=$td.height(); //被双击的td单元格的高度
    $td.html("");        //清空被双击的td单元格里的内容
    var $input=$("<input type='text'>");//设置一个待添加的input表单
    //下面这句是把input表单添加到被双击的单元格里，
    //并设置好input表单的宽高，并让其获取焦点，并设置在失去焦点事的动作
    $input.appendTo($td).width(_w).height(_h).val(_t).focus().blur(function(){
        //失去焦点时，把input的值赋给td单元格
        $td.html($(this).val());
    });
});

这里有完整的在线实例演示：网页链接

Answer 3

$(表格对象).dbclick(function(){
获得编辑区的位置和大小
获取编辑文本的当前值

创建一个input元素
把这个input元素的位置和大小覆盖到编辑区的上方并获得焦点
$(这个input元素).blur(function(){
修改编辑区的文本
删除这个input元素
});
});

追问

能不能给出具体代码。。。真不会写这一列就是我的表格，想让他可编辑

追答

已经写完了啊，你搜索 jQuery 资料就可以转换成 js 代码。

追问

能不能直接帮忙转化成js代码啊，我搜了好多了，还是不会写...

追答

你买一本 jQuery 的书，快速浏览一遍，此问题的几个关键点一目了然。如果还是写不了，那么就去猪八戒或者智诚发任务，接招的人应该多如牛毛。