可编辑表格(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.思路 可编辑表格在后台管理 ...
随机推荐
- 继承&构造函数
子父类中的构造函数的特点. 在子类构造对象时,发现,访问子类构造函数时,父类也运行了. 为什么呢? 原因是:在子类的构造函数中第一行有一个默认的隐式语句. super(); 子类的实例化过程:子类中所 ...
- 1029C语言文法的理解
<程序>→<外部声明>|<程序><外部声明> <外部声明>→<函数定义>|<声明> <函数定义>→< ...
- 解决Max retries exceeded with url的问题
requests.exceptions.ConnectionError: HTTPSConnectionPool(host='itunes.apple.com', port=443): Max ret ...
- 201621123037 《Java程序设计》第14周学习总结
作业14-数据库 标签(空格分隔): Java 1. 本周学习总结 1.1 以你喜欢的方式(思维导图或其他)归纳总结异常相关内容. 2. 使用数据库技术改造你的系统 2.1 简述如何使用数据库技术改造 ...
- rfid工作原理
RFID的工作原理是:标签进入磁场后,如果接收到阅读器发出的特殊射频信号,就能凭借感应电流所获得的能量发送出存储在芯片中的产品信息(即Passive Tag,无源标签或被动标签),或者主动发送某一频率 ...
- bl bl bl bl bl
package com.dh.activiti; import org.springframework.web.servlet.HandlerInterceptor; import org.sprin ...
- Bootstrap-tagsinput标系统使用心得
最近工作中由于需求使用到了Bootstrap-tagsinput标系统,我的需求是: 1)能够从后台数据库获取标签信息展示到前端页面: 2)能够实现输入标签添加到后台,并ajax刷新页面: 3)能够实 ...
- flink ha zk集群迁移实践
flink为了保证线上作业的可用性,提供了ha机制,如果发现线上作业失败,则通过ha中存储的信息来实现作业的重新拉起. 我们在flink的线上环境使用了zk为flink的ha提供服务,但在初期,由于资 ...
- default.properties文件
在地址栏访问某个 action 之所以能访问到,只因为在 default.properties 配置文件中有一个键值对,key 为struts.action.extension,值为 action,, ...
- jenkins配置slave节点 构建项目并执行操作
1.新建与配置结点 [系统管理]-> [管理结点]-> [新建结点] 2.配置slave 说明: Name: 定义slave的唯一名称标识,可以是任意字符串,通常设置为slave主机名.i ...