使用JavaScript实现表格编辑器(实例讲解)
更新时间：2017年08月02日 08:47:56 投稿：jingxian
下面小编就为大家带来一篇使用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实现表格编辑器(实例讲解)就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持脚本之家。
相关文章
这篇文章主要介绍了微信小程序收藏功能的实现代码,本文通过实例代码给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下2020-06-06
这篇文章主要介绍了浅谈微信小程序之官方UI框架we-ui使用教程，WeUI 是一套同微信原生视觉体验一致的基础样式库，由微信官方设计团队为微信内网页和微信小程序量身设计，感兴趣的小伙伴们可以参考一下2018-08-08
javascript 倒排序实现代码。2009-06-06
js获取浏览器的可视区域尺寸的实现代码，需要的朋友可以参考下。2011-11-11
现今团购网、电商网、门户网等，常使用时间记录重要的时刻，如时间显示、倒计时差、限时抢购等，本文分析不同倒计时效果的计算思路及方法，掌握日期对象Date，获取时间的方法,计算时差的方法，实现不同的倒时计效果2015-11-11
下面小编就为大家带来一篇es6系列教程_ Map详解以及常用api介绍。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧2017-09-09![JS写的数字拼图小游戏代码[学习参考]](//img.jbzj.com/images/xgimg/bcimg6.png)
昨天没事做，就用JS写了个数字拼图的小游戏，自娱自乐。 可惜关于逆序数的问题还没解决，现在有时是拼不成的，大家见谅了。2008-10-10
下面小编就为大家带来一篇浅谈js对象的创建和对6种继承模式的理解和遐想。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧2016-10-10
这篇文章主要介绍了微信小程序如何再次获取用户授权的方法，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2019-05-05
在表格导出数据中，发现设置了分页参数，导出的数据仅为表格加载的分页参数数据，于是，针对这样的情况，通过设置分页参数的值，使表格可以加载更多的数据，可达到导出所有数据的功能需求。下面通过本文给大家分享表格展示利器 Bootstrap Table2017-09-09
![JS写的数字拼图小游戏代码[学习参考]](http://img.jbzj.com/images/xgimg/bcimg6.png)
最新评论