一个简单的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. Linux命令之vim（二）

    这一章主要介绍vim编辑器的内部使用方法和注意事项 vim编辑器有四种工作模式:正常模式.插入模式.命令模式.可视模式.简单的判断方法就是看底部,什么都没有就是正常模式,光标在编辑器最底下时则是命令模 ...

  2. Gitlab运维

    安装Gitlab 新建 /etc/yum.repos.d/gitlab-ce.repo [gitlab-ce] name=gitlab-ce baseurl=http://mirrors.tuna.t ...

  3. 【推广】实用命令——tldr

    碎碎念 如题,通常遇到一个新的命令需要查询其帮助的时候,一般使用`command -h`或者`man command`来查询,但是,有时候仅仅想知道这个命令怎么用,并不想知道具体含义啊(这个命令可能不 ...

  4. [CTSC2018]混合果汁(二分答案+主席树)

    考场上写了60分的二分答案,又写了15分的主席树,然后就弃了.. 合起来就A了啊!主席树忘了开20倍空间最后还炸掉了. 最水的签到题被我扔了,主要还是不会用线段树求前缀和. 做法应该是比较显然的,首先 ...

  5. Why DNS Based Global Server Load Balancing (GSLB) Doesn’t Work

    Why DNS Based Global Server Load Balancing (GSLB) Doesn't Work    

  6. 在sublime执行自定义脚本

    [背景] 一般项目都会有一个预处理的脚本, 在发布,或者预览效果的时候,往往要先执行脚本. 想法来自editplus 习惯了editplus的同学,都知道,可以配置自定义执行的脚本. 一般我会把它配置 ...

  7. 【POI】对于POI无法处理超大xls等文件，官方解决方法【已解决】【多线程提升速率待定】

    本次使用POI处理xlsx文件,莫名的遇到了一个无法逾越的问题. 总共71个xlsx文件,单个文件最大达到50M以上,71个xls文件摆在那里就有3-4G的大小. 在起始处理的时候,发现原本适用于正常 ...

  8. 网络流量工具iftop,ifstat

    此文非原创,转自 http://www.cnblogs.com/ggjucheng/archive/2013/01/13/2858923.html 介绍 ifstat工具是个网络接口监测工具,比较简单 ...

  9. 基于Spark Mllib，SparkSQL的电影推荐系统

    本文测试的Spark版本是1.3.1 本文将在Spark集群上搭建一个简单的小型的电影推荐系统,以为之后的完整项目做铺垫和知识积累 整个系统的工作流程描述如下: 1.某电影网站拥有可观的电影资源和用户 ...

  10. [转]Nginx调用远程php-fpm

    Nginx调用远程php-fpm 前后端分离的网站,要在异地部署多套网页的时候,这种nginx配置调用远程php-fpm的方式,不错.可以提高网页的相应速度. 原文: https://www.cnbl ...