table行编辑
一个简单的Demo
<html>
<head>
<title>Table Test Demo</title>
<style>
.view_table {
width:800px;
height:auto;
margin:0px auto;
} .view_table table {
width: 100%;
font-size: 12px;
font-family: "Microsoft YaHei" !important;
text-align: center;
} .view_table table tr td {
border: 1px green solid;
background-color: #cccccc;
line-height: 30px;
width: 80px;
}
</style>
</head>
<body>
<div class="view_table" name="viewTab">
<table border="0" cellpadding="0" cellspacing="0">
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
<td><input type="button" value="edit"></td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
<td><input type="button" value="edit"></td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
<td><input type="button" value="edit"></td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
<td><input type="button" value="edit"></td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
<td><input type="button" value="edit"></td>
</tr>
</table>
</div>
</body>
<script src="http://libs.baidu.com/jquery/1.9.1/jquery.min.js"></script>
<script>
(function(){
$('input[type="button"]').on('click', function(){
var $this = $(this),
$td_arr = $this.parent().html('complete').prevAll('td');
$.each($td_arr, function(){
var $td = $(this);
$td.html('<input type="text" value="'+$td.html()+'">');
});
});
})();
</script>
</html>
table行编辑的更多相关文章
- iView学习笔记(二)：Table行编辑操作
1.前端准备工作 首先新建一个项目,然后引入iView插件,配置好router npm安装iView npm install iview --save cnpm install iview --sav ...
- Bootstrap table 行编辑导航
/*开启表格编辑方向键导航 方向键(←): VK_LEFT (37) 方向键(↑): VK_UP (38) 方向键(→): VK_RIGHT (39) 方向键(↓): VK_DOWN (40) */ ...
- JS框架avalon简单例子 行编辑 添加 修改 删除 验证
为什么要写这个例子:做表单的时候,表单包含主子表,对于子表的编辑,使用的是easyui datagrid的行编辑功能,由于业务比较复杂,实现起来比较麻烦,代码写的也很多,因为插件的封装,无法操作原始的 ...
- Jquery easyui开启行编辑模式增删改操作
Jquery easyui开启行编辑模式增删改操作 Jquery easyui开启行编辑模式增删改操作先上图 Html代码: <table id="dd"> </ ...
- [转]Jquery easyui开启行编辑模式增删改操作
本文转自:http://www.cnblogs.com/nyzhai/archive/2013/05/14/3077152.html Jquery easyui开启行编辑模式增删改操作先上图 Html ...
- JavaScript Table行定位效果
作者:cloudgamer 时间: 2009-09-17 文档类型:原创 来自:蓝色理想 第 1 页 JavaScript Table行定位效果 [1] 第 2 页 JavaScript Table行 ...
- jquery-easyui 中表格的行编辑功能
具体实现代码如下: <table id="tt"></table> $('#tt').datagrid({ title:'Editable DataGrid ...
- Easyui 行编辑
之前没用过,突然用了的时候手忙脚乱的感觉 找了官方文档也好 百度了一大堆东西 表示个人脑袋跟不上思路 直接铺上简化的 以后自己 找起来也方便 以下代码已经执行 应该不会再错了 <tab ...
- jqGrid行编辑配置，方法，事件
行编辑可以在行修改后更新数据,如下图所示 用户用鼠标点击选择一行,jqGrid将可编辑的字段转换为数据输入单元,如上面图所示.不可编辑的列,如id,不会转为可输入单元,而是保持不变.可以通过配置col ...
随机推荐
- CF 999B. Reversing Encryption【模拟/string reverse】
[链接]:CF [代码]: #include<bits/stdc++.h> #define PI acos(-1.0) #define pb push_back #define F fir ...
- CentOS 7.1 中文正式版下载 - 最流行的免费开源企业级 Linux 服务器操作系统
如果说 Ubuntu 是现今最受桌面用户欢迎的 Linux 操作系统,那么 CentOS 就是最受公司.企业.IDC 喜爱的 Linux 发行版了.得益于极为出色的稳定性,全球范围内无数著名网站均选用 ...
- Codeforces 716 E Digit Tree
E. Digit Tree time limit per test 3 seconds memory limit per test 256 megabytes input standard input ...
- 【枚举】bzoj1643 [Usaco2007 Oct]Bessie's Secret Pasture 贝茜的秘密草坪
显然<=n的平方数只有sqrt(n)个,三重循环枚举三块草坪,再减一下验证最后一块是不是平方数.O(n*sqrt(n)). #include<cstdio> #include< ...
- 数据结构之B-树，你每天都在用的，源码发布！
五一前就筹划着写下这篇文章,但是迫于自己从来没有实现过B-树(如果大家感兴趣,我可以考虑写一篇B+树的文章),手中没有源代码,另外自己以前对B-树也是一知半解状态中,担心误人子弟,在4月30日终于把代 ...
- Problem D: 零起点学算法24——判断奇偶数
#include<stdio.h> int main() { int a; while(scanf("%d",&a)!=EOF) ==) printf(&quo ...
- 杂谈PID控制算法——第一篇：三个量
电赛训练了大半个暑假,人渐渐开始进入到了疲倦期.既然这样那就好好休息下自己也好吧. 休息也不能光休息,乘机把平常写过的一些东西好好整理也好. 从第一次训练开始我们就接触到了一个新的名词——PID控制理 ...
- Swift中TableViewCell便利构造器写法
目前为止比较方便的一种方法,如果有更好的写法请通知我,谢谢!
- Redis Exception: Exceeded timeout of 00:00:03
Redis Exception: Exceeded timeout of 00:00:03 居然是 重启了网管, 把网络禁用重启就好了. 服 最终更新: 原来是架构湿 设置为每分钟只能读取6 ...
- Delphi~通过程序窗体句柄获取程序路径
http://www.cnblogs.com/Jesses/articles/1636323.html 引用PsAPI var h:HWND; pid: Cardinal; pHandle: T ...