一个简单的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行编辑的更多相关文章

  1. iView学习笔记(二)：Table行编辑操作

    1.前端准备工作 首先新建一个项目,然后引入iView插件,配置好router npm安装iView npm install iview --save cnpm install iview --sav ...

  2. Bootstrap table 行编辑导航

    /*开启表格编辑方向键导航 方向键(←): VK_LEFT (37) 方向键(↑): VK_UP (38) 方向键(→): VK_RIGHT (39) 方向键(↓): VK_DOWN (40) */ ...

  3. JS框架avalon简单例子 行编辑 添加 修改 删除 验证

    为什么要写这个例子:做表单的时候,表单包含主子表,对于子表的编辑,使用的是easyui datagrid的行编辑功能,由于业务比较复杂,实现起来比较麻烦,代码写的也很多,因为插件的封装,无法操作原始的 ...

  4. Jquery easyui开启行编辑模式增删改操作

    Jquery easyui开启行编辑模式增删改操作 Jquery easyui开启行编辑模式增删改操作先上图 Html代码: <table id="dd"> </ ...

  5. [转]Jquery easyui开启行编辑模式增删改操作

    本文转自:http://www.cnblogs.com/nyzhai/archive/2013/05/14/3077152.html Jquery easyui开启行编辑模式增删改操作先上图 Html ...

  6. JavaScript Table行定位效果

    作者:cloudgamer 时间: 2009-09-17 文档类型:原创 来自:蓝色理想 第 1 页 JavaScript Table行定位效果 [1] 第 2 页 JavaScript Table行 ...

  7. jquery-easyui 中表格的行编辑功能

    具体实现代码如下: <table id="tt"></table> $('#tt').datagrid({ title:'Editable DataGrid ...

  8. Easyui 行编辑

    之前没用过,突然用了的时候手忙脚乱的感觉  找了官方文档也好 百度了一大堆东西   表示个人脑袋跟不上思路 直接铺上简化的  以后自己 找起来也方便  以下代码已经执行 应该不会再错了 <tab ...

  9. jqGrid行编辑配置，方法，事件

    行编辑可以在行修改后更新数据,如下图所示 用户用鼠标点击选择一行,jqGrid将可编辑的字段转换为数据输入单元,如上面图所示.不可编辑的列,如id,不会转为可输入单元,而是保持不变.可以通过配置col ...

随机推荐

  1. MySql笔记之数据表

    数据表:行称为记录  列称为字段 用来存储数据 一.数据类型 数据类型是指列.存储过程参数.表达式和局部变量的数据特征,它决定了数据的存储格式,代表了不同的信息类型. 在我们存储不同类型的数据时,为了 ...

  2. 深入理解Session和Cookie机制

    具体来说cookie机制采用的是在客户端保持状态的方案.它是在用户端的会话状态的存贮机制,他需要用户打开客户端的cookie支持.cookie的作用就是为了解决HTTP协议无状态的缺陷所作的努力. 而 ...

  3. 【贪心】Codeforces Round #401 (Div. 2) D. Cloud of Hashtags

    从后向前枚举字符串,然后从左向右枚举位. 如果该串的某位比之前的串的该位小,那么将之前的那串截断. 如果该串的某位比之前的串的该位大,那么之前那串可以直接保留全长度. 具体看代码. #include& ...

  4. 【dfs】bzoj3563 DZY Loves Chinese

    因为我们可以通过把某一行读到末尾来获取真正的K,所以把它和假K异或之后就是之前联通的次数(异或的逆运算为其本身).最后一次的暴力一下. #include<cstdio> #include& ...

  5. 【最短路】【Heap-Dijkstra】【分层图】bzoj2662 [BeiJing wc2012]冻结

    裸的分层图最短路. #include<cstdio> #include<cstring> #include<queue> #include<algorithm ...

  6. 【拓扑排序】【堆】CH Round #57 - Story of the OI Class 查错

    拓扑排序,要让字典序最小,所以把栈改成堆. #include<cstdio> #include<queue> #include<algorithm> using n ...

  7. 【kruscal】【最小生成树】【并查集扩展】bzoj3714 [PA2014]Kuglarz

    ORZ:http://www.cnblogs.com/zrts/p/bzoj3714.html #include<cstdio> #include<algorithm> usi ...

  8. 1.5 JSP标准标签库（JSTL）(核心标签 out、set、remove、if、choose、forEach、forTokens、redirect)

    JSTL(JavaServer Page Standard Tag  Library):JSP标准标签库.它封装了JSP应用的通用核心功能. 1.准备工作 使用JSTL前需要下载所需文件,下载地址及安 ...

  9. Problem A: 调用函数，求三个数中最大数

    #include<stdio.h> int max(int a,int b,int c); int main() { int a,b,c; while(scanf("%d %d ...

  10. [HTML/CSS]uploadify自定义按钮样式

    概述 在项目中经常用到uploadify上传插件,但是FLASH按钮的外观往往跟我们网页的设计的主题色不太搭配.这时就需要对其样式进行修改. 样式文件是uploadify.css. 打开这个文件后,你 ...