js实现可编辑表单

最新推荐文章于 2024-08-19 10:07:24 发布
最新推荐文章于 2024-08-19 10:07:24 发布
阅读量2.3k 收藏 2
点赞数
分类专栏： 前端设计
在修改数据时，有时候为了方便，我们希望能够直接在表格里面对数据进行直接修改。

      要实现可编辑的表格功能，我们要解决以下问题：
            1.明确要修改的数据在表格中是哪些列（如何找到这些单元格）;
            2.如何让单元格变成可以编辑的;
            3.如何处理单元格的一些按键事件;
            4.解决跨浏览器问题。

    我们通过jQuery可以一步一步解决上述问题。
    

一、    绘制表格

首先我们先画好一个表格。

    Code1:
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  2. <html xmlns="http://www.w3.org/1999/xhtml">
  3. <head>
  4. <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  5. <title>jQuery的跨浏览器可编辑表格</title>
  6. <link rel="stylesheet" type="text/css" href="css/editTable.css" media="all"/>
  7. <script type="text/javascript" src="js/jquery-1.3.2.min.js"></script>
  8. <script type="text/javascript" src="js/editTable.js"></script>
  9. </head>

  11. <body>
  12.     <table>
  13.         <thead>
  14.             <tr>
  15.                 <th colspan="2">鼠标点击表格就可以编辑</th>
  16.             </tr>
  17.         </thead>
  18.         <tbody>
  19.             <tr>
  20.                 <th>学号</th>
  21.                 <th>姓名</th>
  22.             </tr>
  23.             <tr>
  24.                 <td>000001</td>
  25.                 <td>张三</td>
  26.             </tr>
  27.             <tr>
  28.                 <td>000002</td>
  29.                 <td>李四</td>
  30.             </tr>
  31.             <tr>
  32.                 <td>000003</td>
  33.                 <td>王五</td>
  34.             </tr>
  35.             <tr>
  36.                 <td>000004</td>
  37.                 <td>赵六</td>
  38.             </tr>
  39.         </tbody>
  40.     </table>
  41. </body>
  42. </html>
复制代码
画好表格以后显示的如图：

      editTable01.jpg
      
jQuery一步一步实现跨浏览器的可编辑表格_20593


      很明显它看起来不像一个表格，既没有边框，而且很丑。那么我们先给这个表格设置一些样式。

      Code2:
  1. body{}{
  2.     font-size: 14px;
  3. }
  4. table{}{
  5.     color: #4F6B72; 
  6.     border: 1px solid #C1DAD7;
  7.     border-collapse: collapse;
  8.     width: 400px;
  9. }

  11. th{}{
  12.     width: 50%;
  13.     border: 1px solid #C1DAD7;
  14. }
  15. td{}{
  16.     width: 50%;
  17.     border: 1px solid #C1DAD7;
  18. }
复制代码
现在效果好多了：

      editTable02.jpg

jQuery一步一步实现跨浏览器的可编辑表格_20594

      
      但是单元格和单元格之间还是有重叠的边框，只需要在标签选择符table中加上这样一个属性就能去除重复边框：


      border-collapse: collapse;
  1. table{}{
  2.     color: #4F6B72; 
  3.     border: 1px solid #C1DAD7;
  4.     border-collapse: collapse;
  5.     width: 400px;
  6. }
复制代码
editTable03.jpg

jQuery一步一步实现跨浏览器的可编辑表格_20595
  TOP
   
cobra
头像

striver

  • 管理员
  • 保密
  • 1259964
  • 18690
  • 2007-04-09
宣传大使 资源达人 社区元老 社区创始人
[发布日期: 2009-08-27 21:04] 真皮沙发

二、    让表格的单元格变成可编辑的列



绘制好表格以后，我们选取表格中的编号列作为可编辑的列。要让这一列的单元格能够被编辑，就需要在这些列中插入文本框，我们通过这一列单元格的onclick事件来插入文本框。

      Code3:
  1. $(document).ready(function(){
  2.     //找到学号这一列的所有单元格
  3.     //因为学号这一列的单元格在所有td中的位置是偶数（0,2,4,6），所以通过even就可以筛选到td中偶数位的单元格
  4.     var numTd = $("tbody  td:even");
  5.     
  6.     //单击这些td时，创建文本框
  7.     numTd.click(function(){
  8.         //创建文本框对象
  9.         var inputobj = $("<input type='text'>");
  10.         //获取当前点击的单元格对象
  11.         var tdobj = $(this);
  12.         
  13.         //去除文本框的border
  14.         inputobj.css("border","0");
  15.         //让文本框和单元格的宽度保持一致
  16.         inputobj.width(tdobj.width());
  17.         //让文本框的字体和单元格的字体大小一样
  18.         inputobj.css("font-size",tdobj.css("font-size"));
  19.         //让文本框和单元格的字体保持一致
  20.         inputobj.css("font-family",tdobj.css("font-family"));
  21.         //让文本框和单元格的背景保持一致
  22.         inputobj.css("background-color",tdobj.css("background-color"));
  23.         
  24.         //appendTo方法把文本框添加到td中
  25.         inputobj.appendTo(tdobj);
  26.     });
  27. });
复制代码
现在已经把文本框插入到单元格中了。既然要编辑文本框，文本框就应该有值，文本框的值来源于单元格中的数据，并且我们要清空单元格中原有的数据。

      Code4:
  1. $(document).ready(function(){
  2.     //找到学号这一列的所有单元格
  3.     //因为学号这一列的单元格在所有td中的位置是偶数（0,2,4,6），所以通过even就可以筛选到td中偶数位的单元格
  4.     var numTd = $("tbody  td:even");
  5.     
  6.     //单击这些td时，创建文本框
  7.     numTd.click(function(){
  8.         //创建文本框对象
  9.         var inputobj = $("<input type='text'>");
  10.         //获取当前点击的单元格对象
  11.         var tdobj = $(this);
  12.         //获取单元格中的文本
  13.         var text = tdobj.html();
  14.         
  15.         //清空单元格的文本
  16.         tdobj.html("");
  17.         
  18.         //去除文本框的border
  19.         inputobj.css("border","0");
  20.         //让文本框和单元格的宽度保持一致
  21.         inputobj.width(tdobj.width());
  22.         //让文本框的字体和单元格的字体大小一样
  23.         inputobj.css("font-size",tdobj.css("font-size"));
  24.         //让文本框和单元格的字体保持一致
  25.         inputobj.css("font-family",tdobj.css("font-family"));
  26.         //让文本框和单元格的背景保持一致
  27.         inputobj.css("background-color",tdobj.css("background-color"));
  28.         inputobj.css("color","#C75F3E");
  29.         
  30.         //给文本框赋值
  31.         inputobj.val(text);
  32.         
  33.         //appendTo方法把文本框添加到td中
  34.         inputobj.appendTo(tdobj);
  35.     });
  36. });
复制代码
但是以上代码看起来非常的繁琐，jQuery有一个非常好的优点，就是它的代码连缀。上面的代码可以通过连缀进行简化：

      Code5:
  1. $(document).ready(function(){
  2.     //找到学号这一列的所有单元格
  3.     //因为学号这一列的单元格在所有td中的位置是偶数（0,2,4,6），所以通过even就可以筛选到td中偶数位的单元格
  4.     var numTd = $("tbody  td:even");
  5.     
  6.     //单击这些td时，创建文本框
  7.     numTd.click(function(){
  8.         //创建文本框对象
  9.         var inputobj = $("<input type='text'>");
  10.         //获取当前点击的单元格对象
  11.         var tdobj = $(this);
  12.         //获取单元格中的文本
  13.         var text = tdobj.html();
  14.         
  15.         //清空单元格的文本
  16.         tdobj.html("");
  17.         
  18.         inputobj.css("border","0")
  19.                 .css("font-size",tdobj.css("font-size"))
  20.                 .css("font-family",tdobj.css("font-family"))
  21.                 .css("background-color",tdobj.css("background-color"))
  22.                 .css("color","#C75F3E")
  23.                 .width(tdobj.width())
  24.                 .val(text)
  25.                 .appendTo(tdobj);
  26.     });
  27. });
复制代码
现在表格中已经成功的插入了文本框，可以对单元格进行编辑了。

      editTable04.jpg 

_20596

      
    但是有个明显的bug,当你再次点击同一个单元格时，会出现如下效果：

        editTable05.jpg

_20597



      是什么原因造成上面这个bug呢？因为在文本框中插入单元格之后，文本框是属于单元格的，我们点击文本框时，同样会触发单元格的click事件。

      我们需要阻止文本框的点击行为（阻止事件冒泡）。

      Code6:
  1. inputobj.click(function(){
  2.             return false;
  3.         });
复制代码
但是点击单元格的边框时，还是会出现上述的bug,那我们做如下判断：如果单元格中已经插入了文本框，就跳出click事件。

      Code7:
  1. $(document).ready(function(){
  2.     //找到学号这一列的所有单元格
  3.     //因为学号这一列的单元格在所有td中的位置是偶数（0,2,4,6），所以通过even就可以筛选到td中偶数位的单元格
  4.     var numTd = $("tbody  td:even");
  5.     
  6.     //单击这些td时，创建文本框
  7.     numTd.click(function(){
  8.         //创建文本框对象
  9.         var inputobj = $("<input type='text'>");
  10.         //获取当前点击的单元格对象
  11.         var tdobj = $(this);
  12.         //获取单元格中的文本
  13.         var text = tdobj.html();
  14.         
  15.         //如果当前单元格中有文本框，就直接跳出方法
  16.         //注意：一定要在插入文本框前进行判断
  17.         if(tdobj.children("input").length>0){
  18.             return false;
  19.         }
  20.         //清空单元格的文本
  21.         tdobj.html("");
  22.         
  23.         inputobj.css("border","0")
  24.                 .css("font-size",tdobj.css("font-size"))
  25.                 .css("font-family",tdobj.css("font-family"))
  26.                 .css("background-color",tdobj.css("background-color"))
  27.                 .css("color","#C75F3E")
  28.                 .width(tdobj.width())
  29.                 .val(text)
  30.                 .appendTo(tdobj);
  31.                 
  32.         inputobj.get(0).select();
  33.         //阻止文本框的点击事件
  34.         inputobj.click(function(){
  35.             return false;
  36.         });    
  37.     });
  38. });
复制代码
上面的bug解决了，但是我发现，点击单元格时，虽然从表面上看文字是变了色，但没有让我觉得它是能被编辑的。那么我就做一点点的改动，插入文本框的同时，选中文本框的文本。

      Code 8:
  1. inputobj.get(0).select();
复制代码
但是问题又来了，在Safari浏览器中，要让文本框处于选中状态，必须显得让文本框获得焦点。而我们这里只是在点击单元格时，插入文本框并给文本框赋值，文本框并没有获得焦点。解决的方法：通过jQuery的trigger方法来触发某个事件。

      Code9:
  1. inputobj.trigger("focus").trigger("select");
复制代码
  TOP
   
cobra
头像

striver

  • 管理员
  • 保密
  • 1259964
  • 18690
  • 2007-04-09
宣传大使 资源达人 社区元老 社区创始人
[发布日期: 2009-08-27 21:08] 真皮板凳

三、文本框按键事件处理    

以上的这些问题解决了，那我们就再来给文本框添加一些按键事件。我们知道不同的浏览器中获取按键的keyCode是不同的，但是jQuery帮我们解决了这个问题。

      只需要在事件的function中加入event参数，然后在方法体中，通过event对象的which属性就能获得keyCode,event.which属性同化了不同浏览器获取keyCode的方法。

      获得keyCode之后，我主要做两个按键事件：ESC键(键值：27)和Enter键(键值：13)。

      Code10:
  1.         //处理文本框上回车和esc按键的操作
  2.         //jQuery中某个事件方法的function可以定义一个event参数，jQuery会屏蔽浏览器的差异，传递给我们一个可用的event对象
  3.         inputobj.keyup(function(event){
  4.             //获取当前按键的键值
  5.             //jQuery的event对象上有一个which的属性可以获得键盘按键的键值
  6.             var keycode = event.which;
  7.             //处理回车的情况
  8.             if(keycode==13){
  9.                 //获取当前文本框的内容
  10.                 var inputtext = $(this).val();
  11.                 //将td的内容修改成文本框中的内容
  12.                 tdobj.html(inputtext);
  13.             }
  14.             //处理esc的情况
  15.             if(keycode == 27){
  16.                 //将td中的内容还原成text
  17.                 tdobj.html(text);
  18.             }
  19.         });
复制代码
下面是完整的js代码：

      Code11:
  1. $(document).ready(function(){
  2.     //找到学号这一列的所有单元格
  3.     //因为学号这一列的单元格在所有td中的位置是偶数（0,2,4,6），所以通过even就可以筛选到td中偶数位的单元格
  4.     var numTd = $("tbody  td:even");
  5.     
  6.     //单击这些td时，创建文本框
  7.     numTd.click(function(){
  8.         //创建文本框对象
  9.         var inputobj = $("<input type='text'>");
  10.         //获取当前点击的单元格对象
  11.         var tdobj = $(this);
  12.         //获取单元格中的文本
  13.         var text = tdobj.html();
  14.         
  15.         //如果当前单元格中有文本框，就直接跳出方法
  16.         //注意：一定要在插入文本框前进行判断
  17.         if(tdobj.children("input").length>0){
  18.             return false;
  19.         }
  20.         //清空单元格的文本
  21.         tdobj.html("");
  22.         
  23.         inputobj.css("border","0")
  24.                 .css("font-size",tdobj.css("font-size"))
  25.                 .css("font-family",tdobj.css("font-family"))
  26.                 .css("background-color",tdobj.css("background-color"))
  27.                 .css("color","#C75F3E")
  28.                 .width(tdobj.width())
  29.                 .val(text)
  30.                 .appendTo(tdobj);
  31.                 
  32.         inputobj.get(0).select();
  33.         //阻止文本框的点击事件
  34.         inputobj.click(function(){
  35.             return false;
  36.         });
  37.         
  38.         //处理文本框上回车和esc按键的操作
  39.         //jQuery中某个事件方法的function可以定义一个event参数，jQuery会屏蔽浏览器的差异，传递给我们一个可用的event对象
  40.         inputobj.keyup(function(event){
  41.             //获取当前按键的键值
  42.             //jQuery的event对象上有一个which的属性可以获得键盘按键的键值
  43.             var keycode = event.which;
  44.             //处理回车的情况
  45.             if(keycode==13){
  46.                 //获取当前文本框的内容
  47.                 var inputtext = $(this).val();
  48.                 //将td的内容修改成文本框中的内容
  49.                 tdobj.html(inputtext);
  50.             }
  51.             //处理esc的情况
  52.             if(keycode == 27){
  53.                 //将td中的内容还原成text
  54.                 tdobj.html(text);
  55.             }
  56.         });
  57.         
  58.     });
  59. });
复制代码
Jmark_GC
关注
专栏目录
JavaScript实现在线编辑表格
牧场_SZ_Shepherd...
09-22 1745
======JavaScript在线表格演示======中国美国英国
form表单编辑
10-20
form可编辑表单，最强大的插件，最专业的团队开发，希望对大家有所帮助
JS实现可编辑的表格
01-10
JS实现可编辑的表格
EditTable 项目使用教程
最新发布
gitblog_00658的博客
08-19 547
EditTable 项目使用教程 editTablejQuery editTable is a very small jQuery Plugin (~1Kb gzipped) that fill the gap left by the missing of a default input field for data tables.项目地址:https://gitcode.com/gh_mirr...
【JS】表单、JS在线编辑相关资料收集
王德封-逐浪
07-03 4078
为了做一个在线表单编辑的功能收集的资料： 1、表单编辑 http://formdesign.leipi.org/ 2、JS编辑 http://www.17sucai.com/pins/7250.html
editTable.js
Discussing的专栏
06-05 2293
$(function(){    $(".editCategory").click(function(){        var objTD = $(this);        var preText = $.trim(objTD.text());//原先的类别名        var input = $("")   //文本框        objTD.html(input);//当前td的内容
js 使FORM表单的所有元素不可编辑的示例代码
12-04
6. **示例代码**：提供的代码展示了如何实现使表单元素不可编辑的功能。 现在，让我们详细分析给出的代码： ```javascript // 使页面不可编辑 function disableOcx() { var form = document.forms[0]; // 获取...
vue+element 模态框表格形式的可编辑表单实现
10-16
在本例中，我们将探讨如何利用Vue和Element UI来实现一个模态框内的表格形式的可编辑表单。 首先，模态框（Modal）是Element UI中的一个组件，它通常用于展示临时信息或者进行一些操作确认。通过`:visible.sync`...
ex-js-edit-form:使用 JS 的可编辑表单示例
06-10
总之，"ex-js-edit-form:使用 JS 的可编辑表单示例"是一个很好的学习资源，它展示了如何结合JavaScript和jQuery实现动态、交互的网页功能。通过这个项目，开发者可以提升在客户端数据管理和用户交互方面的技能。
JS实现可编辑的后台管理菜单功能【附demo源码下载】
10-21
在本示例中，我们将通过JavaScript实现一个可编辑的后台管理菜单。实现过程中会涉及到页面元素的遍历、动态修改，以及如何通过这些操作与用户交互来实现菜单的编辑功能。为了帮助读者更好地理解并实现这样的功能，...
可编辑表格
qq_45279574的博客
10-29 317
<template> <div class="edit-table-container"> <el-row> <el-row type="flex" justify="space-between"> <el-row type="flex" align="bottom"> <slot /> </el-row> <el-row
可编辑表格（表单）简易实现
04-16
网页中的表格，可填写内容，可获取提交后台。将表格及表单融合
js+html实现的Table可编辑
04-26
此代码是实现单击操作表格，用js和css 简单的实现类似于编辑器中的table
jquery插件 表单编辑器
09-29
这个jquery插件 主要是对在页面显示的数据进行表单编辑插件，提高用户的体验，使交互性大大提高
js+html写的实现表格的动态增删改查和表单验证
08-04
js+html写的实现表格的动态增删改查和表单验证
纯js和html可编辑的table（表格）
01-23
此代码是实现单击操作表格，用js和css 简单的实现类似于编辑器中的table
js实现可编辑表格一
xyr05288的专栏
04-27 3694
from:"http://apps.hi.baidu.com/share/detail/30648462">http://apps.hi.baidu.com/share/detail/30648462   [javascript] view plaincopy GridEdit.js   [javascript] view pl
javascript可编辑表格（可配置）
weixin_44258327的博客
04-28 1560
目录前言一、HTML和css的代码二、javascript代码三、代码地址 前言 自己用js根据老师给的课题做了一个可编辑表格，表格可以把根据模拟的json数据直接生成html表格，可以对生成的表格进行相应配置如：可编辑列配置、编辑规则设置，配置是否需要计算总分功能（分别计算总分的列），配置是否需要删除行功能等. 一、HTML和css的代码 index.html文件: 主要建立了一些基本的标题、提示信息和表格table信息。 <!DOCTYPE html> <html lang="en
Web学习基础应用-可编辑表格
m0_54180642的博客
05-11 795
在本博客中，我们学习了基于Web技术的可编辑表格应用。通过使用JavaScript、HTML和CSS，我们成功实现了角色修改数值、添加新角色和删除角色的功能。通过角色修改数值模块，用户可以点击数值单元格，将其转换为可编辑状态，并更新数值。我们还加入了输入验证功能，确保用户输入的数值符合规定的范围。添加新角色模块允许用户输入角色的编号、姓名和数值，并将其添加到表格中。我们对用户输入进行了验证，以确保数据的准确性和合法性。删除模块允许用户从表格中踢出不需要的角色。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值