这篇文章将为大家详细讲解有关如何使用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> <h2>表格编辑器</h2> <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 宋体;
}
h2{
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实现表格编辑器”这篇文章就分享到这里了，希望以上内容可以对大家有一定的帮助，使各位可以学到更多知识，如果觉得文章不错，请把它分享出去让更多的人看到。
免责声明：本站发布的内容（图片、视频和文字）以原创、转载和分享为主，文章观点不代表本网站立场，如果涉及侵权请联系站长邮箱：is@yisu.com进行举报，并提供相关证据，一经查实，将立刻删除涉嫌侵权内容。
