一个简单的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. 洛谷 P3371 【模板】单源最短路径 【链式前向星+SPFA】

    题目描述 如题,给出一个有向图,请输出从某一点出发到所有点的最短路径长度. 输入输出格式 输入格式: 第一行包含三个整数N.M.S,分别表示点的个数.有向边的个数.出发点的编号. 接下来M行每行包含三 ...

  2. python 2 range, list, and set

    这里主要说的是用python中的range来模拟for循环 转载请声明本文的引用出处:仰望大牛的小清新 1.range(var1,var2,var3): range产生一个列表(list),var1& ...

  3. JVM内存溢出及配置

    一.Java JVM内存介绍 JVM管理两种类型的内存,堆和非堆.按照官方的说法:“Java 虚拟机具有一个堆,堆是运行时数据区域,所有类实例和数组的内存均从此处分配.堆是在 Java 虚拟机启动时创 ...

  4. 面试问题Distilled

    1. 你在项目里都用过哪些Spring的组件 2. Spring AOP的实现原理 3. Hibernate的乐观锁和悲观锁 4. Hibernate的缓存机制 5. 对SOA的了解和认识 6. 谈谈 ...

  5. [BZOJ1513]Tet-Tetris 3D

    get了新的标记永久化技能- 这题要求询问max和覆盖,因为是线段树套线段树,所以内外都不可以标记下传 这种标记永久化的套路是维护两个标记:$mx,all$,$mx$表示这个子树内的真最大值,$all ...

  6. [POI2008]Station

    题目大意: 给定一棵n个结点的树,求一个点x作为根,使得所有结点到x的距离和最小. 思路: 树形DP. 首先考虑将1作为根的情况. 很显然我们可以用一遍O(n)的DFS预处理出每个结点所对应子树大小s ...

  7. java前后端加密(转载)

    最近做一个项目的安全渗透测评,测评人员发来一份测试报告,报告明确提出不允许明文参数传输,因为数据在传输的过程中可能被拦截,被监听,所以在传输数据的时候使用数据的原始内容进行传输的话,安全隐患是非常大的 ...

  8. 如何移除inline-block元素之间的空白

    我们想要的是<li>元素可以紧贴在一起,但是很显然,结果“出乎意料”.那么有什么方法可以让结果符合我们的预期呢?所能想到的解决方法至少有以下四种,而每种方法也都有其优劣所在,至于要如何选择 ...

  9. Tomcat部署时war和war exploded的区别

    转自徐刘根的Tomcat部署时war和war exploded区别以及平时踩得坑 一.war和war exploded的区别 在使用IDEA开发项目的时候,部署Tomcat的时候通常会出现下边的情况: ...

  10. Android 多线程之IntentService 完全详解

    关联文章: Android 多线程之HandlerThread 完全详解 Android 多线程之IntentService 完全详解 android多线程-AsyncTask之工作原理深入解析(上) ...