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

2020-11-27 来源：易榕旅网

实现效果：　　

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实现表格编辑器(实例讲解)