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

以下看下HTML代码:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />

<title>JQuery实例:能够编辑的表格</title>

<link rel="stylesheet" type="text/css" href="EditTable.css">

<script type="text/javascript" src="jquery.js"></script>

<script type="text/javascript" src="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>

在table中能够包括thead和tbody标签,表头的内容放在th中.这样写的优点是能够通过标签选择器选择须要的内容,比方:tbody th{}

js代码:

//须要首先通过Javascript来解决内容部分的奇偶行的背景色不同

$(function(){

	//找到表格的内容区域中全部的奇数行

	$("tbody tr:even").css("background-color","#ECE9D8");

	//找到全部的学号单元格,保存起来

	var numTd = $("tbody td:even");	

	numTd.click(function(){

		var tdObj=$(this);

		if(tdObj.children("input").length>0){

			// 当前td中有input文本框，不运行click处理

			return false;

		}

		var txt = tdObj.html();

	 	//创建一个文本框

		//去掉文本框边框

		//设置文本框中字体为16px

		//使文本框的宽度和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(tdObj.html());

		//将文本框插入到td中

		tdObj.html("");

		inputObj.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();

				tdObj.html(inputtext);

			}

			//esc

			if(keycode==27){

				tdObj.html(txt);

			}

			});

	 });

});

在$ 函数中,通过$("tbody tr")能够返回tbody中全部tr节点,另外,$("tbody tr:even")能够返回tbody中全部索引值是偶数的tr节点.

在上面的代码中我们能够看到html方法,它能够设置或获取节点的html内容:

tdObj.html(inputtext);  为设置节点内容

var txt=tdObj.html();  为获取节点html内容

var inputObj=$("<input type='text'>");

在这里假设$()方法的參数是一般html文本就能够创建一个DOM节点,并包装成jQuery对象.而后面一连串的CSS代码是链式写法,因为jQuery大部分方法都会返回运行这种方法的jQuery对象,因此能够採用这个写法来编写给予jQuery的代码.

在处理文本框上回车和ESC按键操作时,响应keyup事件,在jQuery中,某个事件方法的參数function上能够定义一个event的參数,jQuery会屏蔽浏览器的event差异,传给我们一个可用的event对象,这个event对象上有一个which属性能够获得键盘按键的键值.



CSS代码:


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:#A38ae9;

	}



CSS 代码没有什么可说的了,这里用的是最简单的CSS样式并且代码量非常少.jQuery的强大才刚刚体会到,接下来的实战一定会更加easy,希望能学到很多其它的知识,添加代码量.


												


											
实战Jquery(二)--能够编辑的表格的更多相关文章
	

    
								
  1. JQuery实战总结一 可编辑的表格
		
    JQuery视频看完了,总结学习,记得在牛腩视频中的修改新闻类别的时候也使用了这样的可编辑的表格,使用到 了ajax控制界面不再刷新,轻松解决了类别的名称的修改的问题,直接提交到数据库,这样的方式比起 ...
    
		
    2. 
						
  2. JQuery实现可编辑的表格
		
    点击表格后可直接编辑,回车或鼠标点击页面其他地方后编辑生效,按Esc可取消编辑 第一种单击表格可以编辑的方法 //相当于在页面中的 body标签加上onload事件$(function() {     ...
    
		
    3. 
						
  3. jQuery——能够编辑的表格
		
    版权声明:欢迎转载,请注明出处 https://blog.csdn.net/suneqing/article/details/26856635     今天学习了利用jQuery实现能够编辑的表格这个 ...
    
		
    4. 
						
  4. JQuery实战--可以编辑的表格
		
    廊坊下雪了,15年的第二场雪,比14的来的稍晚一些,停靠在11教门前的自行车,成了廊坊师范学院最美丽的风景线.还记得以前学习css的时候,就曾经接触过如何编写设计一些表格和表单的样式,例如如何设计表格 ...
    
		
    5. 
						
  5. JQuery实战--能够编辑的表格
		
    廊坊下雪了.15年的第二场雪.比14的来的稍晚一些.停靠在11教门前的自行车.成了廊坊师范学院最漂亮的风景线.还记得以前学习css的时候.就以前接触过怎样编写设计一些表格和表单的样式,比如怎样设计表格 ...
    
		
    6. 
						
  6. JQuery经典小例子——可编辑的表格
		
    可编辑的表格: 屏幕剪辑的捕获时间: 2015/8/14 9:16 HTML代码为: <!DOCTYPE html> <htmlxmlns="http://www.w3.o ...
    
		
    7. 
						
  7. 第二百二十八节，jQuery EasyUI，TreeGrid(树形表格)组件
		
    jQuery EasyUI,TreeGrid(树形表格)组件 学习要点: 1.加载方式 2.属性列表 3.事件列表 4.方法列表 本节课重点了解 EasyUI 中 TreeGrid(树形表格)组件的使 ...
    
		
    8. 
						
  8. 第二百二十五节，jQuery EasyUI，PropertyGird(属性表格)组件
		
    jQuery EasyUI,PropertyGird(属性表格)组件 学习要点: 1.加载方式 2.属性列表 3.方法列表 本节课重点了解 EasyUI 中 PropertyGird(属性表格)组件的 ...
    
		
    9. 
						
  9. 第二百二十二节，jQuery EasyUI，DataGrid(数据表格)组件
		
    jQuery EasyUI,DataGrid(数据表格)组件 学习要点: 1.加载方式 2.分页功能 本节课重点了解 EasyUI 中 DataGrid(数据表格)组件的使用方法,这个组件依赖于 Pa ...
    
		
    10. 
		

	


随机推荐
	

    
									
  1. XAMPP 下apache部署网站，多个虚拟机（空间）配置
			
    1.首先修改C盘WINDOWS/system32/drivers/etc目录下的 hosts 文件,用记事本打开,加入: 127.0.0.1 www.a.com 127.0.0.1 www.b.com ...
    
			
    2. 
						
  2. redis命令行清缓存
			
    任务管理器-服务-redis 右击打开详细信息--右击打开文件位置 在这个位置cmd 输入命令redis-cli 在输入命令:flushall 出现ok即清除缓存成功
    
			
    3. 
						
  3. python语言实现阶乘的两种方法---递归和迭代
			
    阶乘的递归实现,代码如下: def factorial(n): if n==1: return 1 else: return n*factorial(n-1) number = int(input(& ...
    
			
    4. 
						
  4. C#分析URL参数获取参数和值得对应列表(二)
			
    不错博客: [C#HttpHelper]官方产品发布与源码下载---苏飞版http://www.sufeinet.com/thread-3-1-1.html http://blog.csdn.net/ ...
    
			
    5. 
						
  5. delphi模态窗口跑到后面的解决办法
			
      Delphi(68)  procedure TForm1.ShowForm2;begin  Self.Enabled := False;  try    with TForm2.Create(ni ...
    
			
    6. 
						
  6. redis深入研究
			
    Redis 设计思路学习与总结 https://cloud.tencent.com/developer/article/1004464 Redis 设计思路学习与总结 下半年利用空余时间研究和分析了部 ...
    
			
    7. 
						
  7. scrapy安装使用教程
			
    1. 安装Python,我用的是Python2.7.11,你喜欢用什么版本,你开心就好,只是后面的软件有些可能需要配套. 2. 安装pip,下载pip-8.1.2.tar.gz (md5, pgp). ...
    
			
    8. 
						
  8. HTTP—缓存
			
    1. ETag HTTP 1.1中引入了ETag来解决缓存的问题.ETag全称是Entity Tag,由服务端生成,服务端可以决定它的生成规则.如果根据文件内容生成散列值.那么条件请求将不会受到时间戳 ...
    
			
    9. 
						
  9. Python 操作mongodb 简单实例
			
    1.建立数据库用户 要读写 mongo数据库,默认没有用户名和密码也可以对数据库进行读写操作,但是从安全的角度,最好给要操作的数据库建立用户名和密码. 打开mongo数据库服务,打开mongo.exe ...
    
			
    10. 
						
  10. 从C转到JAVA学习路之struct与class对比(转）
			
    转自:http://blog.csdn.net/andywxf01/article/details/53506549 JAVA里最牛B的最基本的就是类,而C语言中的struct也可以定义自己的数据结构 ...
    
			
    11.