`

jquery实现可编辑的表格

    博客分类:
  • HTML
阅读更多

今天来演示一个用jquery完成的效果:可编辑的表格。

1.先写一个含有表格的页面jqueryEdit.html:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
        "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
    <title>jquery示例3:可修改的表格</title>
    <META NAME="Author" CONTENT="King_wangyao">
    <META NAME="Description" CONTENT="jQuery示例:可修改的表格">
    <script type="text/javascript" src="js/jquery-1.4.3.min.js"></script>
    <script type="text/javascript" src="js/jqueryEditUseBlur.js"></script>
</head>
<body>
    <table cellpadding="0" cellspacing="1" border="1" style="width: 60%;">
    <tr>
     <td>用户名:</td>
     <td>King_wangyao</td>
    </tr>
    <tr>
     <td>昵称:</td>
     <td>偽僾訫誶</td>
    </tr>
    <tr>
     <td>自我介绍:</td>
     <td>家穷人丑一米四九,小学文化农村户口,破屋三间薄田一亩,冷锅热灶老婆没有,一年四季药不离口,今日这里广征女友,革命道路并肩携手。</td>
    </tr>
    </table>
</body>
</html>

 

2.书写一个javaScript脚本文件,来完成表格的可编辑效果,jqueryEdit.js:

这个文件中,当输入框修改完后是按回车键提交的,下面一个文件是通过鼠标相对文本框失去焦点来实现提交的,本人认为下面第二种方法比较合乎实际一点。

//在页面加载的时候,让所有的td有一个点击事件
$(document).ready(function(){
    var tdNods = $("td");
    tdNods.click(tdClick);
});

//td点击触发的函数
function tdClick(){
         //1.取出当前td里面的文本内容
         var td = $(this);
         var tdText = td.text();
        //2.清空td里面的文本内容
         td.html(""); //也可以使用td.empty();
        //3.建立一个输入框,也就是input标签
          var input = $("<input>");
        //4.将输入框的内容设为刚才保存的td里面的文本内容
          input.attr("value",tdText);
         //4.5.让文本框能够响应键盘按下的keyup事件,主要是用于处理回车确认
           input.keyup(function(event){
               //1.获取当前用户按下的键值
                  //解决不同浏览器获得事件对象的差异,
                 // IE用自动提供window.event,而其他浏览器必须显示的提供,即在方法参数中加上event
               var myEvent = event || window.event;
               var keyCode = myEvent.keyCode;
               //2.判断是否是回车按下
               if(keyCode == 13){
                   //2.保存当前输入框的内容
                    var input = $(this);
                    var inputText = input.val();//这个地方不能用text(),而是用val()
                   //3.清空td的内容,即去掉输入框
                   var td = input.parent("td");
                   td.empty();
                   //4.将保存的文本内容填充到td中去
                   td.html(inputText);
                   //5.让td重新拥有点击事件
                   td.click(tdClick);
               }
           });
        //5.将输入框加到td中
          td.append(input);  //也可以用input.appendTo(td);
        //5.5 让文本框中的文字被高亮选中
        //需要将jquery对象转化为DOM对象
         var inputDom = input.get(0);
         inputDom.select();
        //6.需要移除td上的点击事件
        td.unbind("click");
};

 

下面这个脚本文件是通过鼠标相对文本框失去焦点来实现提交的jqueryEditUseBlur.js:

下面用红色显示的是与上面文件不一样的地方。

//在页面加载时候,就使td节点具有click点击能力
$(document).ready(function(){
    var tdNods = $("td");
    tdNods.click(tdClick);
});

//td的点击事件
function tdClick(){
    //将td的文本内容保存
    var td = $(this);
    var tdText = td.text();
    //将td的内容清空
    td.empty();
    //新建一个输入框
    var input = $("<input>");
    //将保存的文本内容赋值给输入框
    input.attr("value",tdText);
    //将输入框添加到td中
    td.append(input);
    //给输入框注册事件,当失去焦点时就可以将文本保存起来
    input.blur(function(){
        //将输入框的文本保存
        var input = $(this);
        var inputText = input.val();
        //将td的内容,即输入框去掉,然后给td赋值
        var td = input.parent("td");
        td.html(inputText);
        //让td重新拥有点击事件
        td.click(tdClick);

    });
    //将输入框中的文本高亮选中
    //将jquery对象转化为DOM对象
    var inputDom = input.get(0);
    inputDom.select();
    //将td的点击事件移除
    td.unbind("click");
}

 

3.对上面的效果进行进一步的修改,使之更加人性化(红色字体是修改过的地方)

通过修改使你在修改的过程中文本的内容可以按Esc键撤销还原到修改前的状态

//在页面加载时候,就使td节点具有click点击能力
$(document).ready(function(){
    var tdNods = $("td");
    tdNods.click(tdClick);
});

//td的点击事件
function tdClick(){
    //将td的文本内容保存
    var td = $(this);
    var tdText = td.text();
    //将td的内容清空
    td.empty();
    //新建一个输入框
    var input = $("<input>");
    //将保存的文本内容赋值给输入框
    input.attr("value",tdText);
    //将输入框添加到td中
    td.append(input);
    //给输入框注册事件,当失去焦点时就可以将文本保存起来
    input.blur(function(){
        //将输入框的文本保存
        var input = $(this);
        var inputText = input.val();
        //将td的内容,即输入框去掉,然后给td赋值
        var td = input.parent("td");
        td.html(inputText);
        //让td重新拥有点击事件
        td.click(tdClick);

    });
    input.keyup(function(event){
        //1.获取当前用户按下的键值
              //解决不同浏览器获得事件对象的差异,
             // IE用自动提供window.event,而其他浏览器必须显示的提供,即在方法参数中加上event
           var myEvent = event || window.event;
           var keyCode = myEvent.keyCode;
           //2.判断是否是ESC键按下
           if(keyCode == 27){
               //将input输入框的值还原成修改之前的值
               input.val(tdText);
           }
    });
    //将输入框中的文本高亮选中
    //将jquery对象转化为DOM对象
    var inputDom = input.get(0);
    inputDom.select();
    //将td的点击事件移除
    td.unbind("click");
}

分享到:
评论

相关推荐

    jQuery实现可编辑表格

    总结一下,jQuery实现可编辑表格主要涉及以下步骤: 1. 创建带有输入框的HTML表格结构。 2. 使用CSS定制样式,使输入框融入表格。 3. 使用jQuery监听事件,实现表格单元格的编辑和保存功能。 这个简单的示例展示了...

    jquery 实现可编辑表格

    在网页开发中,jQuery 是一个...综上所述,利用 jQuery 实现可编辑表格涉及到 HTML 结构、jQuery 事件监听、DOM 操作以及可能的数据交互。通过结合这些技术,您可以创建出一个功能丰富的、用户友好的可编辑表格组件。

    jquery实现可编辑表格

    总的来说,利用jQuery实现可编辑表格是一项实用的技能,它使开发者能够快速构建动态、交互性强的网页应用。通过结合HTML5的新特性、jQuery的强大功能以及适当的前端框架,我们可以创建出满足各种需求的可编辑表格,...

    JQuery实现可编辑表格

    这篇名为“JQuery实现可编辑表格”的博客文章可能深入探讨了如何利用jQuery的功能来创建一个用户可以编辑的表格。在网页设计中,这种功能常用于数据输入或管理应用程序,允许用户直接在表格内修改数据而无需跳转到...

    JQUERY实现可编辑的表格

    总之,使用jQuery实现可编辑表格是一项实用的技术,它允许用户直接在网页上修改数据,提高了交互性和数据管理的效率。通过学习和实践,你可以根据实际需求进行定制,创建出更加复杂的可编辑表格应用。

    JQuery实现可编辑的表格

    通过以上步骤,我们可以构建出一个功能完善的、基于jQuery的可编辑表格。需要注意的是,虽然jQuery简化了许多任务,但现代前端框架如React、Vue或Angular提供了更强大的状态管理和组件化功能,可能更适合处理复杂的...

    Jquery实现可编辑的表格

    在网页开发中,jQuery是一个非常强大的...总之,使用jQuery实现可编辑表格涉及多个方面,包括DOM操作、事件处理、数据管理以及用户交互优化。通过熟练掌握这些技巧,你可以创建出功能丰富且易于使用的Web应用程序。

    基于jquery的可编辑表格实现代码

    本示例“基于jquery的可编辑表格实现代码”是关于如何利用jQuery创建一个功能丰富的交互式表格,允许用户双击单元格(TD元素)进行编辑,编辑完成后,数据会自动更新回原单元格。以下将详细介绍这一技术实现的关键...

    jquery可编辑性表格

    **jQuery可编辑表格详解** 在Web开发中,表格是一种常用的数据展示方式,而jQuery可编辑表格则让用户体验更上一层楼。它允许用户直接在表格内进行数据编辑,无需跳转页面或刷新,大大提升了交互性和效率。jQuery库...

    jquery可编辑表格.zip

    在这个“jquery可编辑表格.zip”压缩包中,我们关注的是如何使用jQuery来实现一个可编辑的表格功能。这样的功能对于数据展示和管理来说非常实用,尤其是在需要用户即时更新或输入数据的场景下。 首先,让我们详细...

    使用JQuery实现的动态编辑表格

    本人前端小白,因为项目需求,需要动态编辑表格,但是layui的编辑表格只适合 【有数据】修改功能用,并不适合【无数据】新增的功能使用,所以本人研究了几日,才写出了这么一个 无数据绑定,当然也可以自行绑定数据...

    JQuery实现可编辑的表格.rar

    通过以上步骤,我们可以创建一个功能完备、用户体验良好的可编辑表格。JQuery的强大功能使得这个过程变得相对简单,但要注意在实际项目中还需要考虑代码组织、模块化和测试等多方面因素,以确保代码的可维护性和稳定...

    jquery可编辑表格插件

    "jquery可编辑表格插件"就是基于jQuery的一种工具,旨在为网页中的表格提供动态编辑功能,使得用户可以直接在表格中进行数据的增删改查,极大地提升了交互性和用户体验。这种插件在数据展示和管理场景中尤其实用,...

    jquery 实现表格可编辑

    &lt;title&gt;jQuery 可编辑表格 &lt;script src="https://code.jquery.com/jquery-3.6.0.min.js"&gt;&lt;/script&gt; table { border-collapse: collapse; width: 100%; } td, th { border: 1px solid #ddd; padding: 8px;...

    JQuery可编辑表格

    总结来说,利用jQuery创建可编辑表格涉及的关键技术包括DOM操作、事件绑定、数据交互以及用户体验优化。这样的功能增强了用户与网页的互动性,使得数据管理更为直观和高效。通过结合HTML、CSS和jQuery,开发者可以...

    JQuery应用二:可编辑的表格

    总之,利用jQuery实现可编辑表格是一项实用的技能,能够提升网页的交互性。通过理解HTML基础、jQuery选择器和事件处理,以及HTML5的`contenteditable`属性,开发者可以轻松地创建自己的可编辑表格功能。在实际项目中...

    jquery可编辑表格

    jquery可编辑表格代码实现

    利用JQuery实现可编辑的表格

    对于复杂的编辑需求,可以引入插件如DataTables,它提供了丰富的可编辑表格功能,并集成了排序、过滤和搜索等特性。 总之,利用JQuery实现可编辑的表格,不仅提升了用户交互性,还增强了网页的数据管理能力。在实际...

Global site tag (gtag.js) - Google Analytics