可编辑表格(Editable Table)
需求分析
1.单击table的每个cell后，给cell加上一个尺寸相当的input;
2.input后把value传给cell的innerHTML;
3.失焦后删除input。
HTML
<!DOCTYPE html>
<html>
<head>
<meta charset="gb2312" />
<link rel="stylesheet" type="text/css" href="css/table.css"/>
<script src="js/jquery-1.11.3.min.js"></script>
</head>
<body>
<div class="container">
<table class="table" id="edit-table">
<caption><h2>Title</h2></caption>
<thead>
<tr>
<th>Test</th>
<th>Test</th>
<th>Test</th>
<th>Test</th>
<th>Test</th>
<th>Test</th>
<th>Test</th>
<th>Test</th>
<th>Test</th>
<th>Test</th>
</tr>
</thead>
<tbody>
<tr>
<td>test</td>
<td>test</td>
<td>test</td>
<td>test</td>
<td>test</td>
<td>test</td>
<td>test</td>
<td>test</td>
<td>test</td>
<td>test</td>
</tr>
<tr>
<td>test</td>
<td>test</td>
<td>test</td>
<td>test</td>
<td>test</td>
<td>test</td>
<td>test</td>
<td>test</td>
<td>test</td>
<td>test</td>
</tr>
<tr>
<td>test</td>
<td>test</td>
<td>test</td>
<td>test</td>
<td>test</td>
<td>test</td>
<td>test</td>
<td>test</td>
<td>test</td>
<td>test</td>
</tr>
<tr>
<td>test</td>
<td>test</td>
<td>test</td>
<td>test</td>
<td>test</td>
<td>test</td>
<td>test</td>
<td>test</td>
<td>test</td>
<td>test</td>
</tr>
<tr>
<td>test</td>
<td>test</td>
<td>test</td>
<td>test</td>
<td>test</td>
<td>test</td>
<td>test</td>
<td>test</td>
<td>test</td>
<td>test</td>
</tr>
<tr>
<td>test</td>
<td>test</td>
<td>test</td>
<td>test</td>
<td>test</td>
<td>test</td>
<td>test</td>
<td>test</td>
<td>test</td>
<td>test</td>
</tr>
<tr>
<td>test</td>
<td>test</td>
<td>test</td>
<td>test</td>
<td>test</td>
<td>test</td>
<td>test</td>
<td>test</td>
<td>test</td>
<td>test</td>
</tr>
<tr>
<td>test</td>
<td>test</td>
<td>test</td>
<td>test</td>
<td>test</td>
<td>test</td>
<td>test</td>
<td>test</td>
<td>test</td>
<td>test</td>
</tr>
<tr>
<td>test</td>
<td>test</td>
<td>test</td>
<td>test</td>
<td>test</td>
<td>test</td>
<td>test</td>
<td>test</td>
<td>test</td>
<td>test</td>
</tr>
<tr>
<td>test</td>
<td>test</td>
<td>test</td>
<td>test</td>
<td>test</td>
<td>test</td>
<td>test</td>
<td>test</td>
<td>test</td>
<td>test</td>
</tr>
</tbody>
</table>
<ul class="pagination">
<li><a href="#">首页</a></li>
<li><a href="#">上一页</a></li>
<li><a href="#">1</a></li>
<li><a href="#">2</a></li>
<li><a href="#">3</a></li>
<li><a href="#">下一页</a></li>
<li><a href="#">末页</a></li>
</ul>
</div>
<script src="js/insert-input.js"></script>
<script src="js/main.js"></script>
</body>
</html>
table.css
/*The pagination page style*/ html, body, dl, dd, dt,
ul, ol, li,
h1, h2, h3, h4, h5, h6, pre, code,
form, fieldset, legend, input, textarea, optgroup,
p, blockquote, figure, hr, menu, dir,
thead, tbody, tfoot, th, td {
margin:;
padding:;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
} *:before, *:after {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
} html{
font-size: 10px;
font-family: sans-serif;
-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
display: block;
} body {
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif ,'Microsoft Yahei', 微软雅黑;
font-size: 14px;
line-height: 1.42857143;
color: #333;
background-color: #fff;
margin:;
display:block;
} table{
background-color: transparent;
border-spacing:;
border-collapse: collapse;
border-radius:4px;
table-layout:fixed;
}
caption{
padding-top: 8px;
padding-bottom: 8px;
padding-right: 15px;
padding-left: 15px;
color: #777;
text-align: left;
}
th{
text-align: center;
border-top:;
}
tr{ }
td{
display:table-cell;
padding:;
text-align: center;
vertical-align:middle;
} ul{
margin-top:;
margin-bottom: 10px;
} a {
color: #337ab7;
text-decoration: none;
background-color: transparent;
} h2{
font-size: 30px;
} h1 ,h2 ,h3{
margin-top: 20px;
margin-bottom: 10px;
} h1, h2, h3, h4, h5, h6{
font-family: inherit;
font-weight:;
line-height: 1.1;
color: inherit;
} /*div class*/
.container {
padding-right: 15px;
padding-left: 15px;
margin-right: auto;
margin-left: auto;
}
@media (min-width: 768px) {
.container {
width: 750px;
}
}
@media (min-width: 992px) {
.container {
width: 970px;
}
}
@media (min-width: 1200px) {
.container {
width: 1170px;
}
}
/*table class*/
.table{
width: 100%;
max-width: 100%;
margin-bottom: 20px;
}
.table > thead > tr{
background-color: #FCFCFC;
}
.table > thead > tr > th{
border-bottom-width: 2px;
border: 1px solid #ddd;
padding: 5px;
vertical-align: bottom;
border-bottom: 2px solid #ddd;
line-height: 1.42857143;
}
/*.table>tbody>tr:nth-of-type(odd){
background-color: #f9f9f9;
}*/
.table > tbody > tr:hover{
background-color: #f5f5f5;
}
.table > tbody > tr > td{
border: 1px solid #ddd;
padding: 5px;
line-height: 1.42857143;
vertical-align: middle;
cursor:pointer;
}
.table > tbody > tr > td:hover{
background-color: #F5F5DC;
}
/*ul class*/
.pagination {
display: block;
padding-left:;
margin: 20px 0;
border-radius: 4px;
float: right;
}
.pagination > li {
display: inline;
}
.pagination > li > a{
position: relative;
float: left;
padding: 6px 12px;
margin-left: -1px;
line-height: 1.42857143;
color: #337ab7;
text-decoration: none;
background-color: #fff;
border: 1px solid #ddd;
}
.pagination > li:first-child > a{
margin-left:;
border-top-left-radius: 4px;
border-bottom-left-radius: 4px;
}
.pagination > li:last-child > a{
border-top-right-radius: 4px;
border-bottom-right-radius: 4px;
}
.pagination > li > a:hover,
.pagination > li > a:focus{
z-index:;
color: #23527c;
background-color: #eee;
border-color: #ddd;
}
/*input class*/
.insert-edit-input{
display: inline;
width: 100%;
height: inherit;
font-size: 14px;
font-family:inherit;
line-height: 1.42857143;
color: #555;
background-color: #fff;
background-image: none;
border: 1px solid #ccc;
border-radius: 4px;
-webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075);
box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075);
-webkit-transition: border-color ease-in-out .15s, -webkit-box-shadow ease-in-out .15s;
-o-transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s;
transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s;
}
insert-input.js
function editCell(event){
var currentCell;
if(event == null){
currentCell = window.event.srcElement;
}else{
currentCell = event.target;
}
if(currentCell.tagName.toLowerCase() == "td"){
var input = document.createElement("input");
input.type = "text";
input.setAttribute("class", "insert-edit-input");
input.value = currentCell.innerHTML;
input.width = currentCell.style.width;
input.onblur = function(){
currentCell.innerHTML = input.value;
//currentCell.removeChild(input);
input.remove();
};
input.onkeydown = function(event){
if(event.keyCode == 13){
input.blur();
}
};
currentCell.innerHTML = "";
currentCell.appendChild(input);
input.focus();
}
}
function setToEditable(tableid){
document.getElementById(tableid).ondblclick=editCell;
//document.getElementById(tableid).onclick=editCell;
}
main.js
$(document).ready(function(){
setToEditable('edit-table');
});
还有一种使用contentEditable属性来控制的方法
<!DOCTYPE html>
<html>
<head>
<meta charset="gb2312" />
<link rel="stylesheet" type="text/css" href="css/table.css"/>
<script src="js/jquery-1.11.3.min.js"></script>
</head>
<body>
<div class="container">
<table class="table" id="edit-table">
<caption><h2>Title</h2></caption>
<thead>
<tr>
<th>Test</th>
<th>Test</th>
<th>Test</th>
<th>Test</th>
<th>Test</th>
<th>Test</th>
<th>Test</th>
<th>Test</th>
<th>Test</th>
<th>Test</th>
</tr>
</thead>
<tbody>
<tr>
<td>test</td>
<td>test</td>
<td>test</td>
<td>test</td>
<td>test</td>
<td>test</td>
<td>test</td>
<td>test</td>
<td>test</td>
<td>test</td>
</tr>
<tr>
<td>test</td>
<td>test</td>
<td>test</td>
<td>test</td>
<td>test</td>
<td>test</td>
<td>test</td>
<td>test</td>
<td>test</td>
<td>test</td>
</tr>
<tr>
<td>test</td>
<td>test</td>
<td>test</td>
<td>test</td>
<td>test</td>
<td>test</td>
<td>test</td>
<td>test</td>
<td>test</td>
<td>test</td>
</tr>
<tr>
<td>test</td>
<td>test</td>
<td>test</td>
<td>test</td>
<td>test</td>
<td>test</td>
<td>test</td>
<td>test</td>
<td>test</td>
<td>test</td>
</tr>
<tr>
<td>test</td>
<td>test</td>
<td>test</td>
<td>test</td>
<td>test</td>
<td>test</td>
<td>test</td>
<td>test</td>
<td>test</td>
<td>test</td>
</tr>
<tr>
<td>test</td>
<td>test</td>
<td>test</td>
<td>test</td>
<td>test</td>
<td>test</td>
<td>test</td>
<td>test</td>
<td>test</td>
<td>test</td>
</tr>
<tr>
<td>test</td>
<td>test</td>
<td>test</td>
<td>test</td>
<td>test</td>
<td>test</td>
<td>test</td>
<td>test</td>
<td>test</td>
<td>test</td>
</tr>
<tr>
<td>test</td>
<td>test</td>
<td>test</td>
<td>test</td>
<td>test</td>
<td>test</td>
<td>test</td>
<td>test</td>
<td>test</td>
<td>test</td>
</tr>
<tr>
<td>test</td>
<td>test</td>
<td>test</td>
<td>test</td>
<td>test</td>
<td>test</td>
<td>test</td>
<td>test</td>
<td>test</td>
<td>test</td>
</tr>
<tr>
<td>test</td>
<td>test</td>
<td>test</td>
<td>test</td>
<td>test</td>
<td>test</td>
<td>test</td>
<td>test</td>
<td>test</td>
<td>test</td>
</tr>
</tbody>
</table>
<ul class="pagination">
<li><a href="#">首页</a></li>
<li><a href="#">上一页</a></li>
<li><a href="#">1</a></li>
<li><a href="#">2</a></li>
<li><a href="#">3</a></li>
<li><a href="#">下一页</a></li>
<li><a href="#">末页</a></li>
</ul>
</div>
<script>
$(document).ready(function(){
var editCell = $("table#edit-table td");
editCell.each(function(index,element){
editCell.eq(index).click(function(){
editCell.eq(index).attr("contentEditable","true");
});
});
// var editCell = $("table#edit-table td");
// editCell.eq(0).click(function(){
// editCell.eq(0).attr("contentEditable","true");
// });
});
</script>
</body>
</html>
http://abruzzi.iteye.com/blog/299381
http://www.easyui.info/archives/623.html 使用easyUI插件
可编辑表格(Editable Table)的更多相关文章
- Vue iview可编辑表格的实现
创建table实例页 views/table.vue <template> <h1>table page</h1> </template> <sc ...
- JS 可编辑表格的实现(进阶)
1.前言 在普通的可编辑表格的基础上,改进可编辑表格.数据来自外部的json(模拟服务端),通过json数据生成可编辑表格.根据实际情况,表格没有新增数据功能.表格的可编辑列,计算的列,每列的数据大小 ...
- [HTML]HTML5实现可编辑表格
HTML5实现的简单的可编辑表格 [HTML]代码 <!DOCTYPE html > <html > <head> <meta charset="u ...
- jQuery实现可编辑表格
在很多的网页中,这个可编辑表格在许多地方都是非常有用,配合上AJAX技术能够实现很好的用户体验,下面我 们就jQuery来说明一下可编辑表格的实现步骤 首先是HTML代码,非常简单 <!DOCT ...
- 实现Easyui 可编辑表格
一.前端框架使用的easyui框架 二.后端使用的是jfinal 三.效果图 四.html代码 <div id="table_tree" class="easyui ...
- 老男孩Day17作业：后台管理平台编辑表格
一.作业需求: 后台管理平台 ,编辑表格: 1. 非编辑模式: 可对每行进行选择: 反选: 取消选择 2. 编辑模式: 进入编辑模式时如果行被选中,则被选中的行万变为可编辑状态,未选中的不改变 退出编 ...
- jQuery一步一步实现跨浏览器的可编辑表格，支持IE、Firefox、Safari、
脚 本 之 家 www.jb51.net 脚本云 专题 素材下载 电子书 软件下载 源码下载 服务器常用软件 a5交易 首页 网页制作 脚本专栏 脚本下载 网络编程 数据库 CMS教程 电子书籍 平面 ...
- EasyUI/TopJUI可编辑表格的列根据返回数据判断是使用 combobox 还是 numberbox
这两天研究了一下topjui的可编辑表格edatagrid,想在每一列的后面根据返回的数据判断是使用 combobox 还是 numberbox,期间遇到了一些坑,下面实现代码,需要的朋友可以参考一下 ...
- vue+element-ui+slot-scope或原生实现可编辑表格(日历)
你们公司的产品是不是还在做一个可编辑表格功能? 1.前言 咱开发拿到需求大多数是去网上找成型的组件,找不到再看原生的方法能否实现,大牛除外哈,大牛一般喜欢封装组件框架. 2.思路 可编辑表格在后台管理 ...
随机推荐
- OOP 1.4 内联函数和重载函数函数参数缺省值
1.内联函数 存在的背景:函数调用存在开销(调用时候参数压栈,返回地址压栈:返回时从栈取出返回地址,跳转到返回地址.总共需要几条指令的开销).如果函数指令较少,调用多次,函数调用的开销占比大. 内联函 ...
- UIView maskView属性
给View1的maskView 赋值View2 1.View2不会显示在View1上: 2.View2 的alpha通道会体现在View1上. 关于maskView,Apple的解释: An opti ...
- 《剑指offer》--- 两个链表的第一个公共结点
本文算法使用python3实现 1. 问题 输入两个链表,找出它们的第一个公共结点. 时间限制:1s:空间限制:32768K 2 思路描述 使用两个指针 $ p1,p2 $ 分别指向两个链 ...
- 使用 python 管理 mysql 开发工具箱 - 2
这篇博文接着上篇文章<使用 python 管理 mysql 开发工具箱 - 1>,继续写下自己学习 python 管理 MySQL 中的知识记录. 一.MySQL 的读写分离 学习完 My ...
- mosquitto启动时Address already in use 和 一般的 Address already in use
对于mosquitto启动时的地址占用错误,可能是mosquitto启动之后没关掉,进程一直占用了端口.查看mosquitto相关的进程,然后关掉就可启动了. 关掉mosquitto进程即可 参考: ...
- AtCoder Grand Contest 019 B: Reverse and Compare
题意: 给出一个字符串,你可以选择一个长度大于等于1的子串进行翻转,也可以什么都不做.只能翻转最多一次. 问所有不同的操作方式得到的字符串中有多少个是本质不同的. 分析 tourist的题妙妙啊. 首 ...
- bzoj2383[CEOI2011] ballons
题意 在一条数轴上从左向右有一些气球,每个气球一开始位于横坐标xi的位置,是半径为0的圆.现在开始从左向右给每个气球充气.被充气的气球的半径会不断变大,直到达到这个气球的半径上限Ri或者这个气球和之前 ...
- BeanUtils介绍及其使用
BeanUtils工具由Apache软件基金组织编写,提供给我们使用,主要解决的问题是:把对象的属性数据封装到对象中.在整个J2EE的编程过程中,我们经常会从各种配置文件中读取相应的数据,需要明白的一 ...
- （转）Ubuntu 17.04_64上搭建巡风扫描系统(资产信息漏洞扫描内网神器）
巡风简介 巡风是一款适用于企业内网的漏洞快速应急.巡航扫描系统,通过搜索功能可清晰的了解内部网络资产分布情况,并且可指定漏洞插件对搜索结果进行快速漏洞检测并输出结果报表.其主体分为两部分:网络资产识别 ...
- 2017-2018-2 20165218 实验三《敏捷开发与XP实践》实验报告
实验三 敏捷开发与XP实践 课程:java程序设计 姓名:赵冰雨 学号:20165218 指导教师:娄嘉鹏 实验日期:2018.4.30 实验内容.步骤与体会: (一)编码标准 //实验要求 //参考 ...