廊坊下雪了，15年的第二场雪，比14的来的稍晚一些，停靠在11教门前的自行车，成了廊坊师范学院最美丽的风景线。还记得以前学习css的时候，就曾经接触过如何编写设计一些表格和表单的样式，例如如何设计表格中的颜色，隔行变色等等，相关链接，请点击。

当时学习css的时候，关于表格和表单的所有设置，我们都是在html代码里面实现的，今天小编主要给大家讲解一下，如何利用JQuery+js+css实现表格的编辑。接下来，小编就简单总结一下如何实现这个小例子。

第一步：编写html代码，代码如下所示：

<span style="font-size:18px;"><span style="font-size:18px;"><span style="font-size:18px;"><span style="font-size:18px;"><span style="font-size:18px;"><!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
	<head>
		<title>JQuery实例2：可以编辑的表格</title>
		<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
		<link type="text/css" rel="stylesheet" href="css/editTable.css" />
		<script type="text/javascript" src="js/jquery.js"></script>
		<script type="text/javascript" src="js/editTable.js"></script>
	</head>
	<body>
		<table>
			<thead>
				<tr>
					<th colspan="2">鼠标点击表格项就可以编辑</th>
				</tr>
			</thead>
			<tbody>
				<tr>
					<th>学号</th>
					<th>姓名</th>
				</tr>
				<tr>
					<td>000001</td>
					<td>张三</td>
				</tr>
				<tr>
					<td>000002</td>
					<td>李四</td>
				</tr>
				<tr>
					<td>000003</td>
					<td>王五</td>
				</tr>
				<tr>
					<td>000004</td>
					<td>赵六</td>
				</tr>
			</tbody>
		</table>
	</body>
</html>
</span></span></span></span></span>

分析一下上面的代码，我们很容易看出来table中可以包含thead和tbody，表头的内容可以放到th中，我们来运行一下，看看我们的效果：

从上面的运行效果来看，我们很容易看出来，这个表格的基本轮廓已经显示出来，但是似乎少了些许味道，接着，我们来设置一下表格的样式，我们来编写css的代码，如下所示：

<span style="font-size:18px;">table {
	border: 1px solid black;
	/*修正单元格之间的边框不能合并*/
	border-collapse: collapse;
	width: 400px;
}
table td {
	border: 1px solid black;
	width: 50%;
}
table th {
	border: 1px solid black;
	width: 50%;
}
tbody th {
	background-color: #A3BAE9;
}
</span>

分析一下上面的代码，table{}这种写法称作为标签选择器，可以对整个页面所有的table产生影响；table td{}这种写法表示的是table中包含的所有td；可以通过broder-collapse：collapse这种方式来使表格中的单元格边框合并。接着，我们连运行一下，看看运行的效果：

上述的运行效果，已经非常接近我们需要实现的效果了，但是还是欠点火候，还是不能都编辑，接着，js里面的代码，相应的，在js中我们也要建立两个文件，一个jquery一个editTable，鉴于jquery的代码较多，所以小编已经上传相关资源，有需要的小伙伴可以到该链接下载，接着，我们来编写ueditTable的代码，来给整理页面添加行为能力：

<span style="font-size:18px;"><span style="font-size:18px;"><span style="font-size:18px;"><span style="font-size:18px;">//需要首先通过Javascript来解决内容部分奇偶行的背景色不同
//$(document).ready(function(){
//
//});
//简化的ready写法
$(function(){
	//找到表格的内容区域中所有的奇数行
	//使用even是为了把通过tbody tr返回的所有tr元素中，在数组里面下标是偶数的元素返回，因为这些元素，实际上才是我们期望的tbody里面的奇数行
	$("tbody tr:even").css("background-color","#ECE9D8");

	//我们需要找到所有的学号单元格
	var numTd = $("tbody td:even");
	//给这些单元格注册鼠标点击的事件
	numTd.click(function() {
		//找到当前鼠标点击的td,this对应的就是响应了click的那个td
		var tdObj = $(this);
		if (tdObj.children("input").length > 0) {
			//当前td中input，不执行click处理
			return false;
		}
		var text = tdObj.html();
		//清空td中的内容
		tdObj.html("");
		//创建一个文本框
		//去掉文本框的边框
		//设置文本框中的文字字体大小是16px
		//使文本框的宽度和td的宽度相同
		//设置文本框的背景色
		//需要将当前td中的内容放到文本框中
		//将文本框插入到td中
		var inputObj = $("<input type='text'>").css("border-width","0")
			.css("font-size","16px").width(tdObj.width())
			.css("background-color",tdObj.css("background-color"))
			.val(text).appendTo(tdObj);
		//是文本框插入之后就被选中
		inputObj.trigger("focus").trigger("select");
		inputObj.click(function() {
			return false;
		});
		//处理文本框上回车和esc按键的操作
		inputObj.keyup(function(event){
			//获取当前按下键盘的键值
			var keycode = event.which;
			//处理回车的情况
			if (keycode == 13) {
				//获取当当前文本框中的内容
				var inputtext = $(this).val();
				//将td的内容修改成文本框中的内容
				tdObj.html(inputtext);
			}
			//处理esc的情况
			if (keycode == 27) {
				//将td中的内容还原成text
				tdObj.html(text);
			}
		});
	});
});
</span></span></span></span>

运行效果如下：

相关代码有需要的小伙伴可以点击下载。

小编寄语：该博文，小编主要介绍了实战JQuery中的小例子，编写可以编辑的表格，对比之前学习过的css中，如何设置表格表单，该例子中配合jquery和css，让我们的代码更加灵活，实现的功能更加的高大上，BS总结，未完待续......

JQuery实战--可以编辑的表格的更多相关文章

  1. JQuery实战--能够编辑的表格

    廊坊下雪了.15年的第二场雪.比14的来的稍晚一些.停靠在11教门前的自行车.成了廊坊师范学院最漂亮的风景线.还记得以前学习css的时候.就以前接触过怎样编写设计一些表格和表单的样式,比如怎样设计表格 ...

  2. 实战Jquery(二)--能够编辑的表格

    今天实现的是一个表格的样例,通过获取表格的奇数行,设置背景色属性,使得奇偶行背景色不同.这个表格能够在单击时编辑,回车即更改为新输入的内容;ESC还原最初的文本.表格的实现思路非常清晰,仅仅是在实现的 ...

  3. JQuery实现可编辑的表格

    点击表格后可直接编辑,回车或鼠标点击页面其他地方后编辑生效,按Esc可取消编辑 第一种单击表格可以编辑的方法 //相当于在页面中的 body标签加上onload事件$(function() {    ...

  4. jQuery——能够编辑的表格

    版权声明:欢迎转载,请注明出处 https://blog.csdn.net/suneqing/article/details/26856635     今天学习了利用jQuery实现能够编辑的表格这个 ...

  5. JQuery实战总结一 可编辑的表格

    JQuery视频看完了,总结学习,记得在牛腩视频中的修改新闻类别的时候也使用了这样的可编辑的表格,使用到 了ajax控制界面不再刷新,轻松解决了类别的名称的修改的问题,直接提交到数据库,这样的方式比起 ...

  6. JQuery经典小例子——可编辑的表格

    可编辑的表格: 屏幕剪辑的捕获时间: 2015/8/14 9:16 HTML代码为: <!DOCTYPE html> <htmlxmlns="http://www.w3.o ...

  7. jQuery实现可编辑表格

    在很多的网页中,这个可编辑表格在许多地方都是非常有用,配合上AJAX技术能够实现很好的用户体验,下面我 们就jQuery来说明一下可编辑表格的实现步骤 首先是HTML代码,非常简单 <!DOCT ...

  8. 可编辑的表格：jQuery+PHP实现实时编辑表格字段内容

    在本例中,我们会通过jQuery实现单击将一个文本信息变为可编辑的表单,你可以对文本内容进行编辑,然后点击“确定”按钮,新的内容将发送到后台PHP程序处理,并保存到数据库:当点击“取消”按钮,则页面恢 ...

  9. [Web 前端] Jquery实现可直接编辑的表格

    cp from :https://www.cnblogs.com/sjqq/p/6392001.html?utm_source=itdadao&utm_medium=referral 文实例讲 ...

随机推荐

  1. bzoj3831 [Poi2014]Little Bird 单调队列优化dp

    3831: [Poi2014]Little Bird Time Limit: 20 Sec  Memory Limit: 128 MBSubmit: 505  Solved: 322[Submit][ ...

  2. udacity/CarND-Path-Planning-Project 工程详细配置过程——吐血整理

    本人原创,转载请注明地址 学习udacity/CarND-Path-Planning-Project 工程过程 1.首先登陆 jeremy-shannon/CarND-Path-Planning-Pr ...

  3. .eslintrc 文件

    安装 建议采用全局安装方式 npm install -g eslint 初始化 如果你的项目还没有配置文件(.eslintrc)的话,可以通过指定–init参数来生成一个新的配置文件: `eslint ...

  4. mysql 拼接

    SELECT  RTRIM(CONCAT(belong_master_ip ,'(',host_name,')')) AS cloudIP  FROM `cloud_master_cfg`

  5. Linux sort -n 与 -g 排序对比

    公司业务需要,天天用awk统计数值然后排序,出问题了,如下: count.sh 是一个统计脚本,把awk输出的值按占比.条数.类型 在重新输出 awk -F\| '{print $16}' *MQTT ...

  6. 89. Gray Code(中等，了解啥是 gray code)

    知道啥是 gray code 就是收获了． 下面介绍了 gray code 发明的 motivation, 了解动机后就知道啥是 gray code 了． https://zh.wikipedia.o ...

  7. aways on 配置部署（二）——配置域

    前一篇中我们基本了解了配置aways on的三个步骤,本篇就具体讲解如何配置域. DNS的配置 上篇可以看到三台服务器的ip地址,网关,DNS等配置,其中sqlDNS服务器的dns为自己的ip地址,s ...

  8. PHP MySQL Update

    UPDATE 语句用于中修改数据库表中的数据. 更新数据库中的数据 UPDATE 语句用于更新数据库表中已存在的记录. 语法 UPDATE table_name SET column1=value, ...

  9. Docker快速配置指南

    下面是一个跟 Docker 网络相关的命令列表. 其中有些命令选项只有在 Docker 服务启动的时候才能配置,而且不能马上生效. -b BRIDGE or --bridge=BRIDGE --指定容 ...

  10. Python3 CGI编程

    什么是CGI CGI 目前由NCSA维护,NCSA定义CGI如下: CGI(Common Gateway Interface),通用网关接口,它是一段程序,运行在服务器上如:HTTP服务器,提供同客户 ...