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 ...
随机推荐
- ACM-ICPC北京赛区(2017)网络赛2【后缀数组+Java//不会】
#1579 : Reverse Suffix Array 时间限制:1000ms 单点时限:1000ms 内存限制:256MB 描述 There is a strong data structure ...
- HDU 6206 Apple【计算几何+高精度Java】
Problem Description Apple is Taotao's favourite fruit. In his backyard, there are three apple trees ...
- [BZOJ1502]月下柠檬树(自适应辛普森积分)
1502: [NOI2005]月下柠檬树 Time Limit: 5 Sec Memory Limit: 64 MBSubmit: 1387 Solved: 739[Submit][Status] ...
- CodeForces - 981G Magic multisets
假设我们可以对每个位置快速维护一个数组,记录每个位置有哪些值是已经出现了的,哪些值是没有出现的,这样就可以决定修改的时候到底是 *2 还是 +1了. 但是很可惜,并不存在功能这么强大的数组,所以只能另 ...
- Scala实战高手****第14课：Scala集合上的函数式编程实战及Spark源码鉴赏
package com.dt.spark.scala.bascis object Functional_Itearal { def main(args: Array[String]): Unit ...
- 论文中的state-of-the-art
最近看了几篇计算机顶会和SCI,摘要里经常出现这个词,我以为是什么算法,查阅的知是“当前最高水平”,我记得老师说不能有这种模糊词语,需要表明提高了多少,看来论文都很水,即便是IEEE,SCI.
- delphi模态窗口跑到后面的解决办法
Delphi(68) procedure TForm1.ShowForm2;begin Self.Enabled := False; try with TForm2.Create(ni ...
- win8.1无法安装安装.net framework 3.5 解决办法【转】
安装流程1.以系统管理员开启命令提示符(命令提示字符)2挂载windows8.1异3,在命令提示符下输入Dism /online /enablefeature/featurename:NetFx3 / ...
- GraphicsLab Project之辉光（Glare，Glow）效果 【转】
作者:i_dovelemon 日期:2016 / 07 / 02 来源:CSDN 主题:Render to Texture, Post process, Glare, Glow, Multi-pass ...
- Java获取日期属于当年第几周
String today = "2013-01-14"; SimpleDateFormat format = new SimpleDateFormat("yyyy-MM- ...