使用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跳转页面方法实现汇总
Feb 11 Javascript
javascript排序函数实现数字排序
Jun 26 Javascript
IE中document.createElement的iframe无法设置属性name的解决方法
Sep 14 Javascript
微信小程序 ES6Promise.all批量上传文件实现代码
Apr 14 Javascript
Vue2.0表单校验组件vee-validate的使用详解
May 02 Javascript
three.js中文文档学习之通过模块导入
Nov 20 Javascript
vue.js简单配置axios的方法详解
Dec 13 Javascript
除Console.log()外更多的Javascript调试命令
Jan 24 Javascript
详解Webpack多环境代码打包的方法
Aug 03 Javascript
Vue.js 中的 v-cloak 指令及使用详解
Nov 19 Javascript
微信小程序实现两个页面传值的方法分析
Dec 11 Javascript
微信小程序订阅消息(java后端实现)开发
Jun 01 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发电子邮件
2006/10/09 PHP
php下使用无限生命期Session的方法
2007/03/16 PHP
PHP删除数组中特定元素的两种方法
2013/07/02 PHP
PHP中使用SimpleXML检查XML文件结构实例
2015/01/07 PHP
基于jQueryUI和Corethink实现百度的搜索提示功能
2016/11/09 PHP
Javascript &amp; DHTML 实例编程(教程)基础知识
2007/06/02 Javascript
js替代copy(示例代码)
2013/11/27 Javascript
js利用prototype调用Array的slice方法示例
2014/06/09 Javascript
解释&amp;&amp;和||在javascript中的另类用法
2014/07/28 Javascript
jQuery中toggle()函数的使用实例
2015/04/17 Javascript
Bootstrap实现响应式导航栏效果
2015/12/28 Javascript
微信小程序 教程之条件渲染
2016/10/18 Javascript
解析js如何获取css样式
2016/12/11 Javascript
JavaScript实现前端分页控件
2017/04/19 Javascript
js es6系列教程 - 基于new.target属性与es5改造es6的类语法
2017/09/02 Javascript
利用百度地图API获取当前位置信息的实例
2017/11/06 Javascript
浅谈vue-router 路由传参的方法
2017/12/27 Javascript
微信小程序按顺序同步执行的两种方式
2019/12/20 Javascript
Python实现随机生成有效手机号码及身份证功能示例
2017/06/05 Python
Python函数any()和all()的用法及区别介绍
2018/09/14 Python
Python 2/3下处理cjk编码的zip文件的方法
2019/04/26 Python
使用pip安装python库的多种方式
2019/07/31 Python
Python 线程池用法简单示例
2019/10/02 Python
python文件绝对路径写法介绍(windows)
2019/12/25 Python
python标准库OS模块详解
2020/03/10 Python
Python Django view 两种return的实现方式
2020/03/16 Python
意大利大型购物中心:Oliviero.it
2017/10/19 全球购物
C++:memset ,memcpy和strcpy的根本区别
2013/04/27 面试题
后勤自我鉴定
2013/10/13 职场文书
公司联欢晚会主持词
2014/03/22 职场文书
危货运输企业安全生产责任书
2014/07/28 职场文书
励志演讲稿600字
2014/08/21 职场文书
公安领导班子四风问题个人整改措施思想汇报
2014/10/09 职场文书
2015企业年终工作总结范文
2015/05/27 职场文书
2015年机关作风和效能建设工作总结
2015/07/23 职场文书
MySQL使用IF语句及用case语句对条件并结果进行判断 
2022/09/23 MySQL