您的位置：首页 > Web前端 > JavaScript

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

2017-08-02 08:47 627 查看

实现效果：　　

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实现表格编辑器(实例讲解)就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持脚本之家。

您可能感兴趣的文章:

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签： js 表格编辑器

相关文章推荐

新的分享

章节导航