利用jQuery实现可以编辑的表格


Posted in Javascript onMay 26, 2014

今天学习了利用jQuery实现可以编辑的表格这个例子。这个例子需求是这样的:在前台的表格中单击单元格便可修改其中的内容,回车键保存修改的内容,esc撤销保存的内容。原理:单击客户端表格单元格时,在单元格中添加一个文本框,并将单元格中原来的内容赋值给文本框,再进一步去修改文本框内容,修改后将文本框内容重新赋值给单元格。

源码:

前台代码:

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="WebForm1.aspx.cs" Inherits="WebApplication1.WebForm1" %> 
<!DOCTYPE html 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head runat="server"> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> 
<title>jq2—可以编辑的表格</title> 
<link href="css/editTable.css" rel="stylesheet" /> 
<script type="text/javascript" src="js/jquery.js"></script> 
<script type="text/javascript" src="js/editTable.js"></script> 
<%--<script type="text/javascript" src="js/jquery-1.9.1.js"></script>--%> 
</head> 
<body> 
<form id="form1" runat="server"> 
<div> 
<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> 
</div> 
</form> 
</body> 
</html>

css代码:
body { 
} 
table { 
border:1px solid #000000; 
border-collapse:collapse;/*单元格边框合并*/ 
width:400px; 
} 
table td { 
border:1px solid #000000; 
width:50%; 
} 
table th { 
border:1px solid #000000; 
width:50%; 
} 
tbody th { 
background-color:#426fae; 
}

jquery代码
$(function () { 
//找到表格中除了第一个tr以外的所有偶数行 
//使用even为了通过tbody tr返回所有tr元素 
$("tbody tr:even").css("background-color", "#ece9d8"); 
//找到所有的学号单元格 
var numId = $("tbody td:even"); //给单元格注册鼠标点击事件 
numId.click(function () { 
//找到对应当前鼠标点击的td,this对应的就是响应了click的那个td 
var tdObj = $(this); 
//判断td中是否有文本框 
if (tdObj.children("input").length>0) { 
return false; 
} 
//获取表格中的内容 
var text = tdObj.html(); 
//清空td中的内容 
tdObj.html(""); 
//创建文本框 
//去掉文本框的边框 
//设置文本框中字体与表格中的文字大小相同。 
//设置文本框的背景颜色与表格的背景颜色一样 
//是文本框的宽度和td的宽度相同 
//并将td中值放入文本框中 
//将文本框插入到td中 
var inputObj = $("<input type='text'>").css("border-width", "0").css("font-size", tdObj.css("font-size")).css("background-color", tdObj.css("background-color")).width(tdObj.width()).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中的内容还原成原来的内容 
tdObj.html(text); 
} 
}); 
}); 
});

总结:通过这一实例的学习能获得的知识点:

一、html方面

1.table中可以包含thead和tbody

2.表头的内容中可以放th中

3.table{}这种写法称作标签选择器,可以对整个table产生影响。

4.table td{}这种写法表示table中包含的所有td。

二、jquery方面

$()的括号中可以放4种不同的参数

1.参数直接放function,表示页面加载完毕:例如上述例子中jquery代码中的第1行$(function(){})

2.参数可以是css类选择器,并被包装成一个jquery对象。例如:上述例子中jquery代码的第4行$(“tbody tr:even”)

3.参数如果是html文本,可以创建dom节点,并包装成jquery对象。例如:上述例子中jquery代码的第27行$("<input type='text'>")

4.参数可以是一个dom对象,这个方法相当于吧dom对象装换成jquery对象。上述例子中jquery代码的第11行var tdObj = $(this)

本例子中的jquery对象

1.jquery对象后面加css属性,可以设置节点的css属性。例如上述例子中jquery代码中的第4行$("tbody tr:even").css("background-color", "#ece9d8");

2.jquery对象内容中包含了选择器对应的dom节点,以数组保存。

3.jquery对象后面加html方法可以设置或获取节点的html内容。例如上述例子中jquery代码中的第17行var text = tdObj.html()

4.jquery对象后面加val方法,可以获取或设置节点的value值。例如上述例子中jquery代码中第41行var inputtext = $(this).val()

5.jquery对象后面加width方法,可以设置或获取某个节点的宽度。例如上述例子中jquery代码中第27行tdObj.width()

6.jquery对象后面加apppendTo方法可以将一个节点追加到另一个节点所有子节点后面。例如上述例子中jquery代码中第27行appendTo(tdObj)

7.jquery对象后面加trigger方法可以出发某个js事件发生。例如上述例子中jquery代码中第29行inputObj.trigger("focus").trigger("select")

8.jquery对象后面加children方法可以获得某个节点的子节点,可以制定参数来限制子节点的内容。例如上述例子中jquery代码中第13行tdObj.children("input").length

9.如果选择器返回的jquery对象中包含多个dom节点,在这个对象上注册类似click事件,所有dom节点都会用于此事件。例如上述例子中jquery代码中第9行numId.click;

Javascript 相关文章推荐
鼠标图片振动代码
Jul 06 Javascript
javawscript 三级菜单的实现原理
Jul 01 Javascript
获取下拉列表框的值是数组,split,$.inArray示例
Nov 13 Javascript
js判断是否为ie的方法小结
Jan 13 Javascript
jQuery网页选项卡插件rTabs用法实例分析
Aug 26 Javascript
jQuery+canvas实现的球体平抛及颜色动态变换效果
Jan 28 Javascript
基于Javascript实现二级联动菜单效果
Mar 04 Javascript
AngularJS动态生成div的ID源码解析
Aug 29 Javascript
js实现关闭网页出现是否离开提示
Dec 07 Javascript
基于jQuery使用Ajax动态执行模糊查询功能
Jul 05 jQuery
7个好用的JavaScript技巧分享(译)
May 07 Javascript
vue data对象重新赋值无效(未更改)的解决方式
Jul 24 Javascript
js实现简单的购物车有图有代码
May 26 #Javascript
js函数参数设置默认值的一种变通实现方法
May 26 #Javascript
单元选择合并变色示例代码
May 26 #Javascript
jquery实现的一个文章自定义分段显示功能
May 23 #Javascript
用JavaScript实现一个代码简洁、逻辑不复杂的多级树
May 23 #Javascript
ie 7/8不支持trim的属性的解决方案
May 23 #Javascript
JQuery 控制内容长度超出规定长度显示省略号
May 23 #Javascript
You might like
Laravel框架处理用户的请求操作详解
2019/12/20 PHP
function, new function, new Function之间的区别
2007/03/08 Javascript
javascript基础知识大全 便于大家学习,也便于我自己查看
2012/08/17 Javascript
js Map List 遍历使用示例
2013/07/10 Javascript
下拉列表选择项的选中在不同浏览器中的兼容性问题探讨
2013/09/18 Javascript
使用js dom和jquery分别实现简单增删改
2014/09/11 Javascript
基于jquery固定于顶部的导航响应浏览器滚动条事件
2014/11/02 Javascript
JavaScript实现获取dom中class的方法
2015/02/09 Javascript
jquery控制显示服务器生成的图片流
2015/08/04 Javascript
js实现兼容性好的微软官网导航下拉菜单效果
2015/09/07 Javascript
jQuery获取元素父节点的方法
2016/06/21 Javascript
jQuery表单验证插件解析(推荐)
2016/07/21 Javascript
create-react-app构建项目慢的解决方法
2018/03/14 Javascript
JS从非数组对象转数组的方法小结
2018/03/26 Javascript
Vue数据双向绑定原理及简单实现方法
2018/05/18 Javascript
详解js访问对象的属性和方法
2018/10/25 Javascript
JS+HTML5 canvas绘制验证码示例
2018/12/05 Javascript
微信小程序实现的绘制table表格功能示例
2019/04/26 Javascript
JavaScript生成一个不重复的ID的方法示例
2019/09/16 Javascript
[00:52]DOTA2第二届亚洲邀请赛预选赛宣传片
2017/01/13 DOTA
朴素贝叶斯算法的python实现方法
2014/11/18 Python
Python XML转Json之XML2Dict的使用方法
2019/01/15 Python
django xadmin中form_layout添加字段显示方式
2020/03/30 Python
Python开发入门——迭代的基本使用
2020/09/03 Python
纯CSS实现菜单、导航栏的3D翻转动画效果
2014/04/23 HTML / CSS
用CSS3实现无限循环的无缝滚动的示例代码
2017/11/01 HTML / CSS
Willer台湾:日本高速巴士/夜行巴士预约
2017/07/09 全球购物
美国电子产品购物网站:BuyDig.com
2020/06/17 全球购物
大学生活学习的自我评价
2013/12/03 职场文书
全陪导游欢迎词
2014/01/17 职场文书
材料化学专业求职信
2014/07/15 职场文书
机关副主任个人四风问题整改措施
2014/09/26 职场文书
会计专业自荐信范文
2015/03/05 职场文书
2015新生加入学生会自荐书
2015/03/24 职场文书
求职自荐信该如何书写?
2019/06/24 职场文书
总结一些Java常用的加密算法
2021/06/11 Java/Android