使用JavaScript实现表格编辑器(实例讲解)


Posted in Javascript onAugust 02, 2017

实现效果:

使用JavaScript实现表格编辑器(实例讲解)

html代码:

<!DOCTYPE html>
<html>
 <head>
  <meta charset="UTF-8">
  <title>表格编辑器</title>
  <link rel="stylesheet" type="text/css" href="css/tableWrite.css" rel="external nofollow" />
  <script src="js/tableWrite.js" type="text/javascript" charset="utf-8"></script>
 </head>
 <body>
  <h1>表格编辑器</h1>
  <section>
   <table id="myTable">
    <tbody>
     <tr>
      <th>用户名</th>
      <th>地址</th>
      <th>电话</th>
     </tr>
     <tr>
      <td>tom</td>
      <td>济南</td>
      <td>12232341</td>
     </tr>
     <tr>
      <td>qqq</td>
      <td>大时代</td>
      <td>213231312</td>
     </tr>
    </tbody>
   </table>
  </section>
 </body>
</html>

Css 代码:

*{
 font: 12px/25px 宋体;
 }
h1{
 font: 15px/25px 宋体;
 }
table,th,td{
 border-collapse: collapse;
 border: 1px solid #cccccc;
 }

JS 代码

function tableBlurOperator(event){






 //获取事件的值
     let tdvalue = event.target.value;







 //给事件的父类标签赋值
     event.target.parentElement.value=tdvalue;
    }
    function tableClickOperator(event){







//建立一个text输入框
     let input = document.createElement("input");
     input.type="text";







//输入框的初始值为原标签上的值
     input.value=event.target.innerHTML;







//将原标签的值清空,防止出现两次
     event.target.innerHTML="";







//将 text输入框加入到表格中
     event.target.appendChild(input);







//在最后获得焦点
     input.focus();







//失去焦点的事件
     input.addEventListener("blur",tableBlurOperator,false);
    }
   function init(){







//点击事件
    document.getElementById("myTable").addEventListener("click",tableClickOperator,false);
   }
   window.addEventListener("load",init,false);

以上这篇使用JavaScript实现表格编辑器(实例讲解)就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
限制文本字节数js代码
Mar 06 Javascript
js导出格式化的excel 实例方法
Jul 17 Javascript
详解JavaScript基于面向对象之继承实例
Dec 16 Javascript
获取当前月(季度/年)的最后一天(set相关操作及应用)
Dec 27 Javascript
详解jquery validate实现表单验证 (正则表达式)
Jan 18 Javascript
BootStrap自定义popover,点击区域隐藏功能的实现
Jan 23 Javascript
轻量级JS Cookie插件js-cookie的使用方法
Mar 22 Javascript
animate.css在vue项目中的使用教程
Aug 05 Javascript
Bootstrap4 gulp 配置详解
Jan 06 Javascript
详解mpvue中使用vant时需要注意的onChange事件的坑
May 16 Javascript
解决layer.prompt无效的问题
Sep 24 Javascript
详解ES6 中的Object.assign()的用法实例代码
Jan 11 Javascript
使用Node.js搭建静态资源服务详细教程
Aug 02 #Javascript
原生js获取left值和top值的三种方法
Aug 02 #Javascript
认识less和webstrom的less配置方法
Aug 02 #Javascript
基于Jquery Ajax type的4种类型(详解)
Aug 02 #jQuery
详解基于node的前端项目编译时内存溢出问题
Aug 01 #Javascript
javascript 中select框触发事件过程的分析
Aug 01 #Javascript
谈谈对vue响应式数据更新的误解
Aug 01 #Javascript
You might like
PHP删除非空目录的函数代码小结
2013/02/28 PHP
浅析php插件 HTMLPurifier HTML解析器
2013/07/01 PHP
将二维数组转为一维数组的2种方法
2014/05/26 PHP
php实现发送微信模板消息的方法
2015/03/07 PHP
PHP实现通过get方式识别用户发送邮件的方法
2015/07/16 PHP
javascript 按回车键相应按钮提交事件
2009/11/02 Javascript
javascript cookie操作类的实现代码小结附使用方法
2010/06/02 Javascript
深入分析js的冒泡事件
2014/12/05 Javascript
EasyUI布局 高度自适应
2016/06/04 Javascript
全面解析JavaScript中apply和call以及bind(推荐)
2016/06/15 Javascript
jQuery实现自动输入email、时间和域名的方法
2016/08/24 Javascript
angular学习之从零搭建一个angular4.0项目
2017/07/10 Javascript
Vue.js项目部署到服务器的详细步骤
2017/07/17 Javascript
关于vue中的ajax请求和axios包问题
2018/04/19 Javascript
node前端开发模板引擎Jade的入门
2018/05/11 Javascript
layui弹出层按钮提交iframe表单的方法
2018/08/20 Javascript
详解CommonJS和ES6模块循环加载处理的区别
2018/12/26 Javascript
详解微信小程序开发(项目从零开始)
2019/06/06 Javascript
bootstrap table.js动态填充单元格数据的多种方法
2019/07/18 Javascript
基于Express框架使用POST传递Form数据
2019/08/10 Javascript
JavaScript中0、空字符串、'0'是true还是false的知识点分享
2019/09/16 Javascript
vue实现选中效果
2020/10/07 Javascript
python操作数据库之sqlite3打开数据库、删除、修改示例
2014/03/13 Python
python实现的简单文本类游戏实例
2015/04/28 Python
python中如何打包用户自定义模块
2020/09/23 Python
生日宴会答谢词
2014/01/09 职场文书
最经典的大学生职业生涯规划范文
2014/03/05 职场文书
三八妇女节演讲稿
2014/05/27 职场文书
师范生自荐信模板
2014/05/28 职场文书
计算机求职信
2014/07/02 职场文书
项目建议书
2015/02/04 职场文书
2015年计划生育责任书
2015/05/08 职场文书
军训阅兵新闻稿
2015/07/17 职场文书
2015中秋祝酒词
2015/08/12 职场文书
详解Go语言Slice作为函数参数的使用
2021/07/02 Golang
CSS SandBox应用场景及常见问题
2022/06/25 HTML / CSS