当前位置： 移动技术网 > IT编程>开发语言>JavaScript > 基于JQuery制作可编辑的表格特效

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

2019年03月28日  | 移动技术网IT编程  | 我要评论

最近做了个项目，其中项目要求：点击表格后可直接编辑，回车或鼠标点击页面其他地方后编辑生效，按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();
          &nbnbsp; 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");
}

您可能感兴趣的文章:

如对本文有疑问， 点击进行留言回复！！

相关文章:

验证码：
最近更新的文章
大家感兴趣的文章
移动技术网