欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

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

程序员文章站 2022-06-19 21:53:58
最近做了个项目,其中项目要求:点击表格后可直接编辑,回车或鼠标点击页面其他地方后编辑生效,按esc可取消编辑。2个小伙伴给出了2中解决方案,大家来看看哪种更合适呢? 第一种单击表...

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