使用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>
  <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实现表格编辑器 # Vue.js实现可编辑的表格 # angularjs实现table表格td单元格单击变输入框/可编辑状态示例 # vuejs+element UI点击编辑表格某一行时获取内容填入表单的示例 # jQuery实现可编辑表格并生成json结果(实例代码) # JS表格组件BootstrapTable行内编辑解决方案x-editable # JavaScript简单表格编辑功能实现方法 # javascript实现表格排序编辑拖拽缩放 # 百度编辑器从Json对象中取值 # 完成初次渲染 # 在编辑器内画表格 # editable.js 基于jquery的表格的编辑插件 # js+Html实现表格可编辑操作 # 编辑器 # 输入框 # 给大家 # 宋体 # 两次 # 希望能 # 济南 # 这篇 # 建立一个 # 小编 # 值为 # 大家多多 # 清空 # 将原 # tableWrite # id # table # external # myTable # text

返回目录在线咨询

上一篇：建站必须备案吗？备案流程与域名备案材料解析
下一篇：建站必须使用虚拟主机吗？解析替代方案与配置选择

您的项目需求

*请认真填写需求信息，我们会在24小时内与您取得联系。

全网整合营销服务商

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

您的项目需求