利用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 相关文章推荐
js原生态函数中使用jQuery中的 $(this)无效的解决方法
May 25 Javascript
JS对象与json字符串格式转换实例
Oct 28 Javascript
基于jQuery实现复选框是否选中进行答题提示
Dec 10 Javascript
使用JS批量选中功能实现更改数据库中的status状态值(批量展示)
Nov 22 Javascript
vue2+el-menu实现路由跳转及当前项的设置方法实例
Nov 07 Javascript
基于vue cli重构多页面脚手架过程详解
Jan 23 Javascript
JS 实现缓存算法的示例(FIFO/LRU)
Mar 20 Javascript
vue+element 模态框表格形式的可编辑表单实现
Jun 07 Javascript
如何换个角度使用VUE过滤器详解
Sep 11 Javascript
vue设置一开始进入的页面教程
Oct 28 Javascript
区分vue-router的hash和history模式
Oct 03 Javascript
微信小程序实现modal弹出框遮罩层组件(可带文本框)
Dec 20 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
创建数据库php代码 用PHP写出自己的BLOG系统
2010/04/12 PHP
PHP XML操作的各种方法解析(比较详细)
2010/06/17 PHP
PHP include任意文件或URL介绍
2014/04/29 PHP
使用PHP函数scandir排除特定目录
2014/06/12 PHP
php通过排列组合实现1到9数字相加都等于20的方法
2015/08/03 PHP
laravel5.4生成验证码的实例讲解
2017/08/05 PHP
ThinkPHP5 验证器的具体使用
2018/05/31 PHP
Javascript打印网页部分内容的脚本
2008/11/17 Javascript
jquery和css3实现的炫酷时尚的菜单导航
2014/09/01 Javascript
jQuery中的编程范式详解
2014/12/15 Javascript
45个JavaScript编程注意事项、技巧大全
2015/02/11 Javascript
jQuery.position()方法获取不到值的安全替换方法
2015/03/13 Javascript
tuzhu_req.js 实现仿百度图片首页效果
2015/08/11 Javascript
javascript拖拽应用实例
2016/03/25 Javascript
js控制文本框只能输入中文、英文、数字与指定特殊符号的实现代码
2016/09/09 Javascript
JS实现的驼峰式和连字符式转换功能分析
2016/12/21 Javascript
如何解决vue与传统jquery插件冲突
2017/03/20 Javascript
H5图片压缩与上传实例
2017/04/21 Javascript
利用JavaScript实现栈的数据结构示例代码
2017/08/02 Javascript
浅谈angularJS的$watch失效问题的解决方案
2017/08/11 Javascript
微信小程序实现手势滑动效果
2019/08/26 Javascript
javascript实现点击星星小游戏
2019/12/24 Javascript
详解JS深拷贝与浅拷贝
2020/08/04 Javascript
Vue页面跳转传递参数及接收方式
2020/09/09 Javascript
实例讲解Python中整数的最大值输出
2019/03/17 Python
Python Matplotlib简易教程(小白教程)
2020/07/28 Python
matplotlib常见函数之plt.rcParams、matshow的使用(坐标轴设置)
2021/01/05 Python
CSS3实现的文本3D效果附图
2014/09/03 HTML / CSS
HTML5超文本标记语言的实现方法
2020/09/24 HTML / CSS
英国派对礼服和连衣裙购物网站:TFNC London
2018/07/07 全球购物
老人祝寿主持词
2014/03/28 职场文书
出生公证委托书
2014/04/03 职场文书
离婚协议书怎么写2014
2014/09/30 职场文书
如何使用CocosCreator对象池
2021/04/14 Javascript
Python初学者必备的文件读写指南
2021/06/23 Python
ajax请求前端跨域问题原因及解决方案
2021/10/16 Javascript