可编辑表格(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.思路 可编辑表格在后台管理 ...
随机推荐
- SSH 框架的心得
使用SSH框架做完了一个普通网站的前后台项目,成热写点心得,免得以后再入坑.其中使用 Strust2 2.3.33 + Spring 4.3.9 + Hibernate 5.2.10 eclipse ...
- ubuntu16.04卸载火狐，Amazon
一.卸载火狐: . dpkg --get-selections |grep firefox .sudo apt-get purge firefox unity-scope-firefoxbookmar ...
- CentOS7安装.NET Core运行环境
安装.NET Core ->首先需要删除以前安装的版本 -> 获取安装脚本 curl -sSL https://raw.githubusercontent.com/dotnet/cli/r ...
- 如何改变placeholder的颜色
:-moz-placeholder { /* Mozilla Firefox 4 to 18 */ color: #f00; } ::-moz-placeholder { /* Mozilla Fir ...
- 【第六周】关于beta测试组员评分标准的若干意见
组名: 新蜂 组长: 武志远 组员: 宫成荣 谢孝淼 杨柳 李峤 项目名称: java俄罗斯方块 评分规则:简单的才是坠吼的,本组不想搞个大新闻,所以奉行极简的评分方式.每一个人交给组长一个排名,假如 ...
- 对象库（UI MAP）
目的:能够使用配置文件存储被测页面上元素的定位方式和定位表达式,做到定位数据和程序的分离. 测试程序写好以后,可以方便不具备编码能力的测试人员进行自定义修改和配置 : package dataDriv ...
- HDU4474_Yet Another Multiple Problem
题意很简单,要你用一些数字,组成一个数的倍数,且那个数最小. 比赛的时候没能做出来,深坑啊. 其实我只想说我以前就做过这种类型的题目了,诶. 题目的解法是数位宽搜. 首先把可用的数位提取出来,从小到大 ...
- 【bzoj4695】最假女选手 线段树区间最值操作
题目描述 给定一个长度为 N 序列,编号从 1 到 N .要求支持下面几种操作:1.给一个区间[L,R] 加上一个数x 2.把一个区间[L,R] 里小于x 的数变成x 3.把一个区间[L,R] 里大于 ...
- Linux学习笔记二：tar命令使用
tar命令详解 tar命令详解 -c: 建立压缩档案 -x:解压 -t:查看内容 -r:向压缩归档文件末尾追加文件 -u:更新原压缩包中的文件 这五个是独立的命令,压缩解压都要用到其中一个,可以和别的 ...
- Unity3D手游开发日记(3) - 场景加载进度条的完美方案
我以为做个进度条很简单,分分钟解决,结果折腾了一天才搞定,Unity有很多坑,要做完美需要逐一解决. 问题1:最简单的方法不能实现100%的进度 用最简单的方法来实现,不能实现100%的进度,原因是U ...