`

可编辑的表格

jQueryJavaScriptHTML脚本 
阅读更多
1脚本jqueryedit.js

//在页面装载时，让所有的td都有一个点击事件
$(document)ready(function(){
    //找到所有的td节点
    var tds=$("td");
    //给所有的td节点增加点击事伯
    tds.click(function(){
      //0保存当前的td节点
      var td=$(this);
        //1取出td里面的内容
        var text=td.text();
        //2清空td里面的内容
        td.html("");//也可以用td.empty();
        //3建立一个文本框，也就是input的元素节点
        var input=$("<input>");
        //4设置文本框的值是保存起来的文本内容
        input.attr("value",text);//设置属性值
        //4.5让文本框可以响应键盘按下事件，主要用于处理回车确认
        input.keyup(function(event){
          0.获取当前用户按下的键值
          var myEvent=event||window.event;
          var kcode=myEvent.keyCode;
            1.判断是否是回车按下
            if(kcode==13){
                var inputnode=${this};
                //2.保存当前文本框的内容
          var inputtext=inputnode.val();
                //3.清空td里面的肉容
                var tdNode=inputnode.parent();
                //4.将保存的文本框的空容填充到td中
                tdNode.html(inputtext);
                //5.让td重新拥有点击事件
                tdNode.click();
            }
        });
        //5将文本框加入到td中
        td.append(input);//也可以用input.appendTo(td);加添节点
        //5.5让文本框里面的文字被高亮选中
        //需要将jquery的对象转换成dom对象
        var inputdom=input.get(0);
        inputdom.select();
        //6移除点击事件
        td.unbind("click");
    });
});

2页面jqueryEdit.html

<html>
<head>
<script type="text/javascript" src="jslib/jquery.js"></script>
<script type="text/javascript" src="jslib/jqueryedit.js"></script>
<head>
<body>
<table border="1px">
    <tr>
        <td>123123</td>
        <td>456456</td>
    </tr>
</table>
</body>
</html>
分享到：
| 正则基础
评论
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

    可编辑表格

    在IT领域，"可编辑表格"是一个非常实用的功能，它广泛应用于数据管理、数据分析和信息组织。无论是电子表格软件如Microsoft Excel，还是在线协作工具如Google Sheets，这种功能都为用户提供了极大的便利。下面我们将...

    bootstrap插件_table可编辑表格_demo

    在Bootstrap中，表格（Table）是常见的数据展示组件，而“bootstrap插件_table可编辑表格_demo”则是Bootstrap表格功能的一个扩展，它允许用户直接在表格内进行编辑，提供了更加交互式的用户体验。 Bootstrap表格的...

    vue+iview 实现可编辑表格的示例代码

    先简单说明一下,这个Demo...IViewEditTable ## vue+iview 实现的可编辑表格 └── index.html ## 首页 └── js └── editTable.js ## 首页JS └── ivew ## iview相关 └── vue ├── axios.min.js ## a

    可编辑表格js代码

    在IT行业中，尤其是在网页开发领域，可编辑表格的实现是一个常见的需求。"可编辑表格js代码" 提供了一种高效且灵活的解决方案，允许用户直接在网页上对表格数据进行编辑，极大地提升了交互性和用户体验。下面我们将...

    jquery可编辑表格插件

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

    jQuery实现可编辑表格

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

    bootstrap可编辑表格完整代码

    Bootstrap可编辑表格是一种基于Bootstrap框架实现的交互式表格，它允许用户在表格内直接编辑数据，无需跳转页面或打开新窗口。这种功能对于数据管理、CRUD操作（创建、读取、更新、删除）非常实用，尤其适用于后台...

    matlab开发-TLAB中的可编辑表格

    在MATLAB开发中，TLAB库提供了一种高级的数据可视化工具——可编辑表格。这种功能使得用户能够在图形界面中直接操作数据，进行编辑、查看和分析，极大地提升了交互性和效率。下面将详细介绍这个功能及其应用。 一、...

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

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

    原创-javascript服务器交互型可编辑表格

    【标题】"原创-javascript服务器交互型可编辑表格"是一个关于使用JavaScript实现与服务器进行交互的动态、可编辑表格的技术分享。在这个项目中，开发者利用JavaScript的灵活性和强大的功能，创建了一个用户可以直接...

    jQuery+PureCSS可编辑表格插件

    **jQuery+PureCSS可编辑表格插件** 这款插件结合了jQuery的动态功能和PureCSS的简洁设计，为网页开发者提供了一种简单易用的可编辑表格解决方案。它允许用户直接在表格中编辑数据，提高了交互性和用户体验。下面将...

    vue可编辑表格

    基于vue的可编辑表格 很多时候我们需要直接编辑表格内容，这个组件刚好解决了需求

    EXT 可编辑 表格的例子

    EXT 可编辑 表格的例子 EXT 可编辑 表格的例子

    【JavaScript源代码】vue 中使用 vxe-table 制作可编辑表格的使用过程.docx

    在Vue项目中，当面临需要实现可编辑表格的需求时，开发者通常会遇到性能问题，特别是在数据量较大的情况下。本文将详细介绍如何使用`vxe-table`库来创建一个高效的可编辑表格，以解决类似的问题。 首先，`vxe-table...

    VC6.0中基于MSFlexGrid的可编辑表格的制作及其若干问题的解决方案C++源

    在提供的压缩包文件"VC2010-08-25-VC6.0中基于MSFlexGrid的可编辑表格的制作及其若干问题的解决方案"中，很可能包含了具体的代码示例和解决这些问题的方法。通过学习这些示例，开发者可以更好地理解和掌握如何在VC...

    可编辑表格（表单）简易实现

    总结，实现一个可编辑表格（表单）需要结合HTML、CSS、JavaScript以及可能的前端框架，与后端配合完成数据的提交和处理。通过这样的方式，我们可以创建出一个功能完备、用户体验良好的网页表单系统。

    在线编辑表格 html格式可编辑表格 javascript编写

    这个资源，"在线编辑表格 html格式可编辑表格 javascript编写"，提供了一个使用HTML和JavaScript实现的简单可编辑表格。JavaScript是一种强大的客户端脚本语言，常用于增强网页的动态功能，而HTML则是网页内容的基础...

    Vue封装的可编辑表格插件方法

    在本文中，我们将详细解析如何使用Vue.js框架封装一个可编辑的表格插件。该插件允许用户在表格中进行单元格编辑，并能对表头进行任意合并，从而提供了强大的表格数据处理功能。 首先，我们需要了解该插件的基本结构...

    WebTableSetup(jsp网页可编辑表格).rar

    【标题】"WebTableSetup(jsp网页可编辑表格)"是一个涉及到网页开发技术的主题，主要聚焦在如何在JSP（JavaServer Pages）环境中创建一个可编辑的表格。JSP是一种动态网页技术，允许开发者将Java代码嵌入到HTML页面中...

Magicbox
Global site tag (gtag.js) - Google Analytics