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

2019-11-19 15:55:31

字体：大中小

来源：转载

供稿：网友

实现效果：　　

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实现前端图片上传即时预览功能

下一篇：使用Node.js搭建静态资源服务详细教程