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

时间：2021-05-25

实现效果：　　

　　　　

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

声明：本页内容来源网络，仅供用户参考；我单位不保证亦不表示资料全面及准确无误，也不保证亦不表示这些资料为最新信息，如因任何原因，本网内容或者用户因倚赖本网内容造成任何损失或损害，我单位将不会负任何法律责任。如涉及版权问题，请提交至online#300.cn邮箱联系删除。

相关文章