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

日期:2019-09-07编辑作者:关于计算机

近些日子做了个门类,个中项目供给:点击表格后可一贯编辑,回车或鼠标点击页面其余地方后编辑生效,按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编辑表格

关键词:

调用JavaScript对象的办法集锦

明天在做项目时,境遇了亟待创设JavaScript对象的情况。所以Bing了一篇老外写的关于3种创建JavaScript对象的稿子,看后...

详细>>

jQuery基础语法实例入门

正文实例叙述了jQuery基础语法。共享给大家供大家仿效。具体剖析如下: jQuery基础语法实例入门,jquery语法实例 本文...

详细>>

Shell对象执行

WScript.Shell(Windows Script Host RuntimeLibrary)是三个对象,对应的文书是C:/WINDOWS/system32/wshom.ocx,Wscript.shell是服务器系统会...

详细>>

jQuery回调函数的定义及用法实例

正文实例陈述了jQuery回调函数的概念及用法。分享给大家供我们仿效。具体剖析如下: jQuery回调函数的概念及用法实...

详细>>