实现效果：　　

　　　　

htm l代码：

<!DOCTYPE html>

<html>

    <head>

        <meta charset="UTF-8">

        <title>表格编辑器</title>

        <link rel="stylesheet" type="text/css" href="css/tableWrite.css"/>

        <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实现表格编辑器的更多相关文章

  1. 10个免费的javascript富文本编辑器（jQuery and non-jQuery）

    祝愿园子里的朋友圣诞节快乐. 本文介绍了10个免费易用富文本编辑器(rich text editors,RTE),其中5个是Jquery插件,另外5个是非Jquery富文本编辑器 简介 Javascr ...

  2. javascript 在线文本编辑器

    javascript 在线文本编辑器实现代码. 效果例如以下: watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvcGhwZmVuZ2h1bw==/font/5 ...

  3. JavaScript创建表格的两种方式

    方式一: var data = [ { id: 1, name: "first", age: 12 }, { id: 2, name: "second", ag ...

  4. JavaScript 实现文本编辑器

    JavaScript 实现文本编辑器 最近,我需要做一个非常基本的网页内容编辑功能.我不想使用 iframe ,我也不想要一个功能特别多的复杂编辑器,只需要很基本的内容编辑功能,例如粗体,斜体,列表, ...

  5. Javascript合并表格相同内容单元格示例

    效果图: HTML代码: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http: ...

  6. Javascript富文本编辑器

    分享几款Javascript富文本编辑器 ueditor jqframework xheditor htmlbox kindeditor wymeditor jhtmlarea markitup ck ...

  7. JavaScript 实现表格隔行变色

    JavaScript 实现表格隔行变色 版权声明:未经授权,严禁分享! 构建界面 界面HTML代码 <style> #data,th,td{ border: 1px solid #aaaa ...

  8. CodeMirror：基于JavaScript的代码编辑器

    官方网站定义: http://codemirror.net/ CodeMirror is a versatile text editor implemented in JavaScript for t ...

  9. javascript生成表格增删改查 JavaScript动态改变表格单元格内容 动态生成表格 JS获取表格任意单元格 javascript如何动态删除表格某一行

    jsp页面表格布局Html代码 <body onload="show()"> <center> <input type="text" ...

随机推荐

  1. k-选取问题

    一.k-选取问题:给定任意一个可比较的序列,从中找出第k个元素(k从0开始,默认是从小到大的次序)的问题称为k-选取(k-selection).k-选取问题有两张退化的情况:1.0-选取问题即是找出序 ...

  2. Bootstrap文本排版基础--Bootsrap

    1.排版前的基础 (1)移动设备优先 <meta name="viewport" content="width=device-width, initial-scal ...

  3. 多线程（RunLoop）

    1.RunLoop的概念及作用 2.RunLoop的使用 3.RunLoop的相关类 4.RunLoop的工作原理 5.小结 6.思考 什么是RunLoop? 从字面意思上是一直循环跑,事实上就是一个 ...

  4. MyServer

    //一.设置一个8089端口的本地IP服务器 1 package myserver; import java.io.IOException; import java.net.ServerSocket; ...

  5. 2017-03-02学习心得之Java代码

    package com.lovo.classes;import java.util.Random;import java.util.TreeSet;import java.util.Scanner;p ...

  6. 深入浅出：JavaScript作用域链

    1. 什么是作用域 任何程序设计语言都有作用域的概念,简单的说,作用域就是变量的作用范围. 2. 变量的分类和变量作用域的分类 在JavaScript中,变量分为全局变量和局部变量,与此相对应的,变量 ...

  7. JUnit5 安装与使用

    虽然JUnit5 的测试版本早就出来了,但正式版直到几年9月份推出,目前最新版5.0.1.几乎所有的Java 开发人员都会使用JUnit 来做测试,但其实很多自动化测试人员也会使用Junit .目前, ...

  8. 【前端】windows64位必备软件清单

    目录 一.前言 二.日常必备 三.前端相关 四.个人习惯 一.前言 重做系统以后,安装各种软件就是挺烦人的一件事. 特地整理成文章,并且将相关软件上传到了百度网盘,省的以后再各种找资源了. 百度网盘下 ...

  9. Unix时代的开创者Ken Thompson

    自图灵奖诞生以来,其获得者一直都是计算机领域的科学家与学者,而在所有这些界的图灵奖中只有唯一的一届有个例外,那就是Ken Thompson与Dennis M. Ritchie,他们都是计算机软件工程师 ...

  10. 跨域资源共享CORS实现

    问题描述: 本地已经实现的restful接口,在地址栏输入url:loaclhost:8080/admins即可得到预期的json字符串,在网页上显示如下: [{"id":1,&q ...