使用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 相关文章推荐
编写跨浏览器的javascript代码必备[js多浏览器兼容写法]
Oct 29 Javascript
javascript 操作cookies及正确使用cookies的属性
Oct 15 Javascript
JavaScript DOM 学习第二章 编辑文本
Feb 19 Javascript
javascript 表格内容排序 简单操作示例代码
Jan 03 Javascript
VS2008中使用JavaScript调用WebServices
Dec 18 Javascript
JavaScript 学习笔记之变量及其作用域
Jan 14 Javascript
老生常谈Javascript中的原型和this指针
Oct 09 Javascript
Vue制作Todo List网页
Apr 26 Javascript
JS实现点击下拉菜单把选择的内容同步到input输入框内的实例
Jan 23 Javascript
使用vue2.6实现抖音【时间轮盘】屏保效果附源码
Apr 24 Javascript
详解基于Vue/React项目的移动端适配方案
Aug 23 Javascript
OpenLayers3实现对地图的基本操作
Sep 28 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 调试利器debug_print_backtrace()
2012/07/23 PHP
php缓存技术详细总结
2013/08/07 PHP
php实现httpRequest的方法
2015/03/13 PHP
Laravel中Facade的加载过程与原理详解
2017/09/22 PHP
浅谈PHP各环境下的伪静态配置
2019/03/13 PHP
VBScript版代码高亮
2006/06/26 Javascript
Javascript - HTML的request类
2006/07/15 Javascript
jQuery库与其他JS库冲突的解决办法
2010/02/07 Javascript
原生JS实现平滑回到顶部组件
2016/03/16 Javascript
js自定义select下拉框美化特效
2016/05/12 Javascript
文本框只能输入数字的实现方法(兼容IE火狐)
2016/06/25 Javascript
浅谈JS正则表达式的RegExp对象和括号的使用
2016/07/28 Javascript
js 性能优化之算法和流程控制
2017/02/15 Javascript
vue一个页面实现音乐播放器的示例
2018/02/06 Javascript
VUE2 前端实现 静态二级省市联动选择select的示例
2018/02/09 Javascript
vue编译打包本地查看index文件的方法
2018/02/23 Javascript
通过js实现压缩图片上传功能
2020/02/25 Javascript
python发送邮件的实例代码(支持html、图片、附件)
2013/03/04 Python
Python使用urllib模块的urlopen超时问题解决方法
2014/11/08 Python
python3.4下django集成使用xadmin后台的方法
2017/08/15 Python
详解Python的循环结构知识点
2019/05/20 Python
Python threading的使用方法解析
2019/08/28 Python
Python生成个性签名图片获取GUI过程解析
2019/12/16 Python
Python接口开发实现步骤详解
2020/04/26 Python
全网最详细的PyCharm+Anaconda的安装过程图解
2021/01/25 Python
X/HTML5 和 XHTML2
2008/10/17 HTML / CSS
美国球迷装备的第一来源:FOCO
2020/07/03 全球购物
EM Cosmetics官网:由彩妆大神Michelle Phan创办的独立品牌
2020/04/27 全球购物
高中班长自我鉴定
2013/12/20 职场文书
环保专业大学生职业规划设计
2014/01/10 职场文书
表彰先进的通报
2014/01/31 职场文书
光学与应用专业毕业生求职信
2014/09/01 职场文书
入党积极分子学习优秀共产党员先进事迹思想汇报
2014/09/13 职场文书
企业承诺书格式范文
2015/04/28 职场文书
2019经典广告词集锦!
2019/07/02 职场文书
mysql 如何获取两个集合的交集/差集/并集
2021/06/08 MySQL