一个简单的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. POJ 3984 迷宫问题【BFS/路径记录/手写队列】

    迷宫问题 Time Limit: 1000MS Memory Limit: 65536K Total Submissions: 31428 Accepted: 18000 Description 定义 ...

  2. NOI 1.5编程基础之循环控制 44:第n小的质数

    描述 输入一个正整数n,求第n小的质数. 输入 一个不超过10000的正整数n. 输出 第n小的质数. 样例输入 10 样例输出 29

  3. 使用history命令查看作业的整体执行情况

    1)通过使用history命令,我们可以深入到一个Job的任务级层面查看执行最快的任务,以及执行最慢的任务,以及其他的有用信息.命令如下: hadoop job -history /output “/ ...

  4. 利用Java位运算符，完成Unsigned转换(无符号)

    方案二:利用Java位运算符,完成Unsigned转换. 正常情况下,Java提供的数据类型是有符号signed类型的,可以通过位运算的方式得到它们相对应的无符号值,参见几个方法中的代码: publi ...

  5. Saga的实现模式——进化（Saga implementation patterns – variations）

    在之前的几个博客中,我主要讲了两个saga的实现模式: 基于command的控制者模式 基于事件的观察者模式 当然,这些都不是实现saga的唯一方式.我们甚至可以将这些结合起来. 发布者——收集者 回 ...

  6. ubi层次

    转:http://www.360doc.com/content/11/0518/13/496343_117643185.shtml UBI是什么? 它是一种flash管理方式 flash是一系列连续的 ...

  7. 常见社工破解WPA2密码方法及防范措施

    0×00前言 何为社工?社工是一种通过利用受害者心理弱点,如本能反应.好奇心.同情心.信任.贪婪等进行诸如欺骗.盗取.控制等非法手段的一种攻击方式.在无线安全中也可以利用社工做到许多非法操作.下面举几 ...

  8. 【Linux】pv vg lv, 加盘，扩容磁盘

    PV VG LV关系:一个物理盘(或一个lun)就是一个pv,有几个物理盘就有几个pv.一个或者几个硬盘可以组成一个vg,一个系统可以包括好几个vg,比如rootvg ,datavg等 PV组成VG, ...

  9. Docker解析及轻量级PaaS平台演练（四）--Fig相关介绍

    本篇中将会使用开源工具Fig Fig是什么? 简单的说就是对Docker的封装,从而方便我们构建应用的运行环境 它所做的事情是协调Docker上的各个Container之间的联系,并通过服务发现的方式 ...

  10. 使用JMeter3.0实战之分布式并发测试以及web API接口测试

    简介: 该文档是以Apche JMeter-3.0为例进行编写的,通过网上的学习资料和官方文档的说明手册学习后,进行项目操作实践,将测试的过程记录下提供给大家学习. 本博文的内容主要是进行配置JMet ...