基于JQuery制作可编辑的表格特效

181 阅读 0 评论 120 点赞

我是靠谱客的博主激昂黑米，最近开发中收集的这篇文章主要介绍基于JQuery制作可编辑的表格特效，觉得挺不错的，现在分享给大家，希望可以做个参考。

概述

最近做了个项目，其中项目要求：点击表格后可直接编辑，回车或鼠标点击页面其他地方后编辑生效，按Esc可取消编辑

2个小伙伴给出了2中解决方案，大家来看看哪种更合适呢？

第一种单击表格可以编辑的方法

复制代码代码如下:

//相当于在页面中的 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");

}