一个简单的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. HDU 2660 Accepted Necklace【数值型DFS】

    Accepted Necklace Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 32768/32768 K (Java/Others ...

  2. [CF911D]Inversion Counting

    题目大意: 给你一个数列,翻转其中一个区间,问每次翻转过后逆序对个数的奇偶性. 思路: 首先树状数组求出一开始的奇偶性,然后考虑每次翻转对答案的贡献. 对于整个区间,我们可以把翻转转化成若干次交换. ...

  3. 6.3（java学习笔记）缓冲流

    一.缓冲流 使用缓冲流后的输入输出流会先存储到缓冲区,等缓冲区满后一次性将缓冲区中的数据写入或取出. 避免程序频繁的和文件直接操作,这样操作有利于提高读写效率. 缓冲流是构建在输入输出流之上的,可以理 ...

  4. jdk8新特性

    JDK8新特性(JDK8的新特性) * 接口中可以定义有方法体的方法,如果是非静态,必须用default修饰 * 如果是静态的就不用了 class Test { public void run() { ...

  5. ACM--输入三个字符（可以重复）后，按各字符的ASCII码从小到大的顺序输出这三个字符。

    代码如下: #include <stdio.h> main() { char a,b,c,d; int i; scanf("%d",&i); getchar() ...

  6. javascript模块化有什么意义？

    以前,所有的javascript都写在一个文件里,方便只加载一个文件就可以了,但是代码越来越多,必须分成多个文件加载,类似: <script src="1.js">&l ...

  7. Dell服务器Raid卡电池策略调整

    DELL服务器的Riad卡都有可充电池的特性,这块可充电电池,在不使用时,也会有微弱的放电现象,当它的电量放电到低到一定程度时,Raid卡控制器就会对电池进行一次“放电”,将剩余的电量放掉,然后再进行 ...

  8. CSS3 animation动画

    CSS3 animation动画 1.@keyframes 定义关键帧动画2.animation-name 动画名称3.animation-duration 动画时间4.animation-timin ...

  9. [转载]centos 6.4中git如何正常显示中文

    FROM: http://ju.outofmemory.cn/entry/63250 系统版本:centos 6.4 git版本:1.7.1,使用yum直接安装的. 当使用git status查看时, ...

  10. springmv日志debug异常，javax.naming.NameNotFoundException

    解决方案: 在web.xml配置如下代码即可: <context-param> <param-name>spring.profiles.active</param-nam ...