用JavaScript实现表格编辑器
实现效果：
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实现表格编辑器的更多相关文章
- 10个免费的javascript富文本编辑器（jQuery and non-jQuery）
祝愿园子里的朋友圣诞节快乐. 本文介绍了10个免费易用富文本编辑器(rich text editors,RTE),其中5个是Jquery插件,另外5个是非Jquery富文本编辑器 简介 Javascr ...
- javascript 在线文本编辑器
javascript 在线文本编辑器实现代码. 效果例如以下: watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvcGhwZmVuZ2h1bw==/font/5 ...
- JavaScript创建表格的两种方式
方式一: var data = [ { id: 1, name: "first", age: 12 }, { id: 2, name: "second", ag ...
- JavaScript 实现文本编辑器
JavaScript 实现文本编辑器 最近,我需要做一个非常基本的网页内容编辑功能.我不想使用 iframe ,我也不想要一个功能特别多的复杂编辑器,只需要很基本的内容编辑功能,例如粗体,斜体,列表, ...
- Javascript合并表格相同内容单元格示例
效果图: HTML代码: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http: ...
- Javascript富文本编辑器
分享几款Javascript富文本编辑器 ueditor jqframework xheditor htmlbox kindeditor wymeditor jhtmlarea markitup ck ...
- JavaScript 实现表格隔行变色
JavaScript 实现表格隔行变色 版权声明:未经授权,严禁分享! 构建界面 界面HTML代码 <style> #data,th,td{ border: 1px solid #aaaa ...
- CodeMirror：基于JavaScript的代码编辑器
官方网站定义: http://codemirror.net/ CodeMirror is a versatile text editor implemented in JavaScript for t ...
- javascript生成表格增删改查 JavaScript动态改变表格单元格内容 动态生成表格 JS获取表格任意单元格 javascript如何动态删除表格某一行
jsp页面表格布局Html代码 <body onload="show()"> <center> <input type="text" ...
随机推荐
- DevOps之服务故障
唠叨话 关于德语噢屁事的知识点,仅提供精华汇总,具体知识点细节,参考教程网址,如需帮助,请留言. <DevOps服务故障> 0.故障1.设施故障2.设备故障3.系统故障4.虚拟化故障5.存 ...
- Android基础知识03—Activity的基本用法
------Activity 活动------ 活动 Activity 是一种包含用户界面的组件,即一个界面就是一个活动 创建活动的过程: >> 创建一个类,继承自Activity类,并且 ...
- [原创]InnoDB体系结构
参阅:<innodb存储引擎内幕> innodb整体的体系结构如下图所示: 整体结构分两大部分:内存和进程其中内存包括:buffer_pool\redo log buffer\addit ...
- Arch Linux之pacman调用axel多线程加速下载
转载自 奶牛博客 本来感觉Arch Linux用个国内的源就很给力了,可是到了学校移动的cmcc-edu超级不稳定,而且单线程速度就二三十k,无奈,开多线程下载.在Ubuntu下面可以用apt-fas ...
- 为Android设备添加A2SD支持
相信很多用Android设备的用户都有这个问题,内部存储太小导致应用只能装那么几个,虽然rom也有提供移动到sd卡的选项,但是仅仅是移动程序文件到sd卡,并不能解决多少问题,多装几个还是会 ...
- LINUX 笔记-MOUNT
mount [-t vfstype] [-o options] device dir -o options: 主要用来描述设备或档案的挂接方式 1)loop:用来把一个文件当成硬盘分区挂上系统 2)r ...
- jQuery实现用户输入自动完成功能
jQuery实现用户输入自动完成功能 利用jQuery UI中Auto-complete插件实现输入自动完成功能,大家在使用诸如淘宝.京东等电商平台搜索商品时,往往只要输入商品的一些特殊字符,就可以显 ...
- MySql sql按时间分组
select DATE_FORMAT(f.upload_time,'%Y%u') weeks,count(*),sum(p.download_times),sum(p.collection_times ...
- LeetCode 190. Reverse Bits （反转位）
Reverse bits of a given 32 bits unsigned integer. For example, given input 43261596 (represented in ...
- appium测试代码nullpoint
今天写了个简单向上滑动,执行到向上滑动操作,报nullpoint异常,经过各种乱碰终于解决了,现记录一下过程,以备以后参考! 环境背景:java+testng+appium 在@Test下调用 dir ...