可编辑表格(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.思路 可编辑表格在后台管理 ...
随机推荐
- BETA事后总结
目录 所有成员 项目宣传视频链接 贡献比例 工作流程 组员分工 本组 Beta 冲刺站立会议博客链接汇总 燃尽图 原计划.达成情况及原因分析 组员:胡绪佩 组员:周政演 组员:庄卉 组员:何家伟 组员 ...
- ant 安装及基础教程 ！
这篇文章主要介绍了ant使用指南详细入门教程,本文详细的讲解了安装.验证安装.使用方法.使用实例.ant命令等内容,需要的朋友可以参考下 一.概述 ant 是一个将软件编译.测试.部署等步骤联系在 ...
- 虚拟机下安装CentOS6.5系统教程
虚拟机下安装CentOS6.5系统教程 时间:2014-12-09 01:40来源:linuxdown.net 作者:linuxdown.net 举报 点击:15315次 其实通过VM安装虚拟机还是蛮 ...
- JAVA字节流(读写文件)
InputStream此抽象类是表示字节输入流的所有类的超类.需要定义 InputStream 的子类的应用程序必须始终提供返回下一个输入字节的方法. int available()返回此输入流方法的 ...
- [转帖]Linux 的UTC 和 GMT
1.问题 对于装有Windows和Linux系统的机器,进入Windows显示的时间和Linux不一致,Linux中的时间比Windows提前8个小时. 2.解决方法 修改/etc/default/r ...
- java 基础 --File
1, 创建文件 File file = new File(path); file.createNewFile(); //如果路径不存在,会抛异常 file.mkdir();//如果路径不存在,返回fa ...
- BZOJ 1237 配对(DP)
给出两个长度为n的序列.这两个序列的数字可以连边当且仅当它们不同,权值为它们的绝对值,求出这个二分图的最小权值完全匹配.没有输出-1. n<=1e5.用KM会TLE+MLE. 如果连边没有限制的 ...
- 创建Django工程-Day19
1. 新建一个day19的工程和app01. 2. 新建templates和static的文件夹. 3. 去settings.py中去做配置. 1)注释掉csrf 2)配置模板路径 'DIRS': [ ...
- llinux 安装oracle
5.传输oracle的客户端(600几M linux.x64_11gR2_client).oracle的依赖包(20几M packages),linux只支持zip(rar较困难不做解释) 6.打开l ...
- Eclipse如何将代码变成大写/小写
代码变小写:选中要换的代码,操作Ctrl+Shift+y即可将大写变小写 代码变大写:选中要换的代码,操作Ctrl+Shift+x即可将小写变大写