近些日子做了个门类，个中项目供给：点击表格后可一贯编辑，回车或鼠标点击页面其余地方后编辑生效，按Esc可收回编辑

JQuery完结可编写制定的报表，jquery编辑表格

点击表格后可径直编辑，回车或鼠标点击页面别的地方后编辑生效，按Esc可撤销编辑 

首先种单击表格能够编写制定的措施

//也等于在页面中的 body标签加上onload事件
$(function() {
    //找到全体的td节点
    var tds = $("td");
    //给拥有的td增多点击事件
    tds.click(function() {
        //得到当前点击的对象
        var td = $(this);
        //抽出当前td的文本内容保存起来
        var oldText = td.text();
        //组建二个文本框，设置文本框的值为保存的值
        var input = $("<input type='text' value='" + oldText + "'/>");
        //将当前td对象内容设置为input
        td.html(input);
        //设置文本框的点击事件失效
        input.click(function() {
            return false;
        });
        //设置文本框的体裁
        input.css("border-width", "0");
        input.css("font-size", "16px");
        input.css("text-align", "center");
        //设置文本框宽度等于td的宽窄
        input.width(td.width());
        //当文本框获得难点时接触全选事件
        input.trigger("focus").trigger("select");
        //当文本框失去核心时再也成为文本
        input.blur(function() {
            var input_blur = $(this);
            //保存当前文本框的开始和结果
            var newText = input_blur.val();
            td.html(newText);
        });
        //响应键盘事件
        input.keyup(function(event) {
            // 获取键值
            var keyEvent = event || window.event;
            var key = keyEvent.keyCode;
            //获得当前指标
            var input_blur = $(this);
            switch (key)
                    {
                case 13://按下回车键，保存当前文本框的剧情
                    var newText = input_blur.val();
                    td.html(newText);
                    break;

第三种单击表格能够编写的办法 

$(document).ready(function(){
    var tds = $("td");
    tds.click(tdClick);
});

function tdClick(){
    var tdnode = $(this);
    var tdtext = tdnode.text();
    tdnode.html("");
    var input = $("<input>");
    input.val(tdtext); //    input.attr("value",tdtext);
    input.keyup(function(event){
        var myEvent = event || window.event;
        var keyCode = myEvent.keyCode;
        if(keyCode == 13){
            var inputnode = $(this);
            var inputtext = inputnode.val();
            var td = inputnode.parent();
            td.html(inputtext);
            td.click(tdClick);
        }
        if(keyCode == 27){  //判别是或不是按下ESC键
            $(this).parent().html(tdtext);
            $(this).parent().click(tdClick);
        }
    });

    tdnode.append(input);
    tdnode.children("input").trigger("select");
    //输入框失去大旨，所施行的艺术
    input.blur(function(){
        tdnode.html($(this).val());
        tdnode.click(tdClick);
    });
    tdnode.unbind("click");
}

点击表格后可径直编辑，回车或鼠标点击页面其余地点后编辑生效，按Esc可裁撤编辑 第一种单击表...

2个小同伴给出了第22中学实施方案，大家来探视哪一种更确切吧？

率先种单击表格能够编写制定的情势

复制代码 代码如下:

//也就是在页面中的 body标签加上onload事件
$(function() {
    //找到全部的td节点
    var tds = $("td");
    //给持有的td加多点击事件
    tds.click(function() {
        //得到当前点击的靶子
        var td = $(this);
        //抽出当前td的文件内容保存起来
        var oldText = td.text();
        //组建一个文本框，设置文本框的值为保存的值
        var input = $("<input type='text' value='" + oldText + "'/>");
        //将当前td对象内容设置为input
        td.html(input);
        //设置文本框的点击事件失效
        input.click(function() {
            return false;
        });
        //设置文本框的样式
        input.css("border-width", "0");
        input.css("font-size", "16px");
        input.css("text-align", "center");
        //设置文本框宽度等于td的宽窄
        input.width(td.width());
        //当文本框获得难点时接触全选事件
        input.trigger("focus").trigger("select");
        //当文本框失去焦点时再一次形成文本
        input.blur(function() {
            var input_blur = $(this);
            //保存当前文本框的剧情
            var newText = input_blur.val();
            td.html(newText);
        });
        //响应键盘事件
        input.keyup(function(event) {
            // 获取键值
            var keyEvent = event || window.event;
            var key = keyEvent.keyCode;
            //获得当前指标
            var input_blur = $(this);
            switch (key)
                    {
                case 13://按下回车键，保存当前文本框的原委
                    var newText = input_blur.val();
                    td.html(newText);
                    break;
                case 27://按下 esc键，裁撤修改，把文本框形成文本
                    td.html(oldText);
                    break;
            }
        });
    });
});

第二种单击表格能够编制的格局

复制代码 代码如下:

$(document).ready(function(){
    var tds = $("td");
    tds.click(tdClick);
});
function tdClick(){
    var tdnode = $(this);
    var tdtext = tdnode.text();
    tdnode.html("");
    var input = $("<input>");
    input.val(tdtext); //    input.attr("value",tdtext);
    input.keyup(function(event){
        var myEvent = event || window.event;
        var keyCode = myEvent.keyCode;
        if(keyCode == 13){
            var inputnode = $(this);
            var inputtext = inputnode.val();
            var td = inputnode.parent();
            td.html(inputtext);
            td.click(tdClick);
        }
        if(keyCode == 27){  //判别是不是按下ESC键
            $(this).parent().html(tdtext);
            $(this).parent().click(tdClick);
        }
    });
    tdnode.append(input);
    tdnode.children("input").trigger("select");
    //输入框失去大旨，所实行的措施
    input.blur(function(){
        tdnode.html($(this).val());
        tdnode.click(tdClick);
    });
    tdnode.unbind("click");
}

想相比较的话，个人更爱好第二种一些，小同伙们是怎样思想呢，招待留言给自个儿。

你大概感兴趣的篇章:

• jQuery实现的可编辑表格完整实例
• 依靠Bootstrap使用jQuery达成轻易可编辑表格
• BootStrap和jQuery相结合贯彻可编辑表格
• jQuery+PHP落成可编辑表格字段内容并实时保存
• JQuery完结可编写制定的报表实例批注（2）
• jQuery(非HTML5)可编辑表格完结代码
• 基于PHP+Jquery制作的可编写制定的报表的代码
• jquery学习笔记二 完成可编写制定的表格
• 用Jquery完成可编辑表格并用AJAX提交到服务器修改数据
• jQuery一步一步达成跨浏览器的可编辑表格，援助IE、Firefox、Safari、Chrome、Opera
• jQuery完成能够编写制定的报表实例详解【附demo源码下载】

本文由今晚最快开奖现场直播发布于关于计算机,转载请注明出处：基于JQuery制作可编辑的表格特效，jquery编辑表格

关键词：