使用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 相关文章推荐
mysql输出数据赋给js变量报unterminated string literal错误原因
May 22 Javascript
JQuery中$.ajax()方法参数详解及应用
Dec 12 Javascript
如何用JavaScript定义一个类
Sep 12 Javascript
js前端实现多图图片上传预览的两个方法(推荐)
Nov 18 Javascript
JavaScript中捕获与冒泡详解及实例
Feb 03 Javascript
Vue2几种常见开局方式详解
Sep 09 Javascript
JS随机排序数组实现方法分析
Oct 11 Javascript
JS代码实现电脑配置检测功能
Mar 21 Javascript
详解js中Array的方法及技巧
Sep 12 Javascript
解决Vue中 父子传值 数据丢失问题
Aug 27 Javascript
JavaScript Tab菜单实现过程解析
May 13 Javascript
JavaScript编码小技巧分享
Sep 17 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
收音机鉴频器对声音的影响和频偏分析
2021/03/02 无线电
提升PHP执行速度全攻略
2006/10/09 PHP
php将字符串转化成date存入数据库的两种方式
2014/04/28 PHP
PHP实现更新中间关联表数据的两种方法
2014/09/01 PHP
php格式化时间戳显示友好的时间实现思路及代码
2014/10/23 PHP
thinkphp3.x中变量的获取和过滤方法详解
2016/05/20 PHP
PDO::getAvailableDrivers讲解
2019/01/28 PHP
PHP7 弃用功能
2021/03/09 PHP
Javascript MD4
2006/12/20 Javascript
jQuery+CSS3实现树叶飘落特效
2015/02/01 Javascript
学习Node.js模块机制
2016/10/17 Javascript
jQuery插件echarts实现的多折线图效果示例【附demo源码下载】
2017/03/04 Javascript
js实现瀑布流效果(自动生成新的内容)
2017/03/16 Javascript
ES6新特性之函数的扩展实例详解
2017/04/01 Javascript
javascript编写简易计算器
2017/05/06 Javascript
vue中路由验证和相应拦截的使用详解
2017/12/13 Javascript
react-router4 配合webpack require.ensure 实现异步加载的示例
2018/01/18 Javascript
vue中Element-ui 输入银行账号每四位加一个空格的实现代码
2018/09/14 Javascript
详解Vue-cli3.X使用px2rem遇到的问题
2019/08/09 Javascript
python3.4下django集成使用xadmin后台的方法
2017/08/15 Python
python中实现将多个print输出合成一个数组
2018/04/19 Python
Python利用scapy实现ARP欺骗的方法
2019/07/23 Python
Python实现朴素贝叶斯的学习与分类过程解析
2019/08/24 Python
Python笔记之观察者模式
2019/11/20 Python
海蓝之谜(LA MER)澳大利亚官方商城:全球高端奢华护肤品牌
2017/10/27 全球购物
Kivari官网:在线购买波西米亚服装
2018/10/29 全球购物
Android面试宝典
2013/08/06 面试题
农村婚礼主持词
2014/03/13 职场文书
员工薪酬激励方案
2014/06/13 职场文书
护士医德医风自我评价
2014/09/15 职场文书
爱国教育主题班会
2015/08/14 职场文书
2016年学校十一国庆节活动总结
2016/04/01 职场文书
使用 JavaScript 制作页面效果
2021/04/21 Javascript
Python源码解析之List
2021/05/21 Python
MYSQL 的10大经典优化案例场景实战
2021/09/14 MySQL
VUE使用draggable实现组件拖拽
2022/04/06 Vue.js