利用jQuery实现可以编辑的表格
今天学习了利用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>
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;
}
$(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；
相关推荐
-
easyui-edatagrid.js实现回车键结束编辑功能的实例
easyui的可编辑表格并不具备回车事件.这让edatagrid在结束编辑时的操作很麻烦,除非你点击其他行,或者点出表格否则不会取消编辑行. 为了让结束编辑操作更简单些,我为每个单元格添加了回车事件,当回车时结束本行编辑,具体做法是重写edatagrid的onDblClickCell事件,如下: onDblClickCell : function(index, field, value) { if (opts.editing) { $(this).edatagrid('editRow', ind
-
jQuery EasyUI中对表格进行编辑的实现代码
效果图: 复制代码 代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8&
-
利用jQuery实现可以编辑的表格
今天学习了利用jQuery实现可以编辑的表格这个例子.这个例子需求是这样的:在前台的表格中单击单元格便可修改其中的内容,回车键保存修改的内容,esc撤销保存的内容.原理:单击客户端表格单元格时,在单元格中添加一个文本框,并将单元格中原来的内容赋值给文本框,再进一步去修改文本框内容,修改后将文本框内容重新赋值给单元格. 源码: 前台代码: 复制代码 代码如下: <%@ Page Language="C#" AutoEventWireup="true" CodeB
-
jQuery实现可以编辑的表格实例详解【附demo源码下载】
本文实例讲述了jQuery实现可以编辑的表格.分享给大家供大家参考,具体如下: 今天小编主要给大家讲解一下,如何利用jQuery+js+css实现表格的编辑.接下来,小编就简单总结一下如何实现这个小例子. 第一步:编写html代码,代码如下所示: <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> &l
-
基于jQuery实现可编辑的表格
前言 我们知道jQuery是一个轻便的JavaScript框架,里面封装了系统和程序常用到的一些方法,利用CSS.HTML可以将这些内容运用起来,做出各式各样好看的界面,下面小编使用jQuery实现了一个"可编辑的表格"的例子. 代码加说明 一.HTML代码 1.使用<thead></thead>实现标头: 2.一个table中可以包含thead和tbody 3.表头的内容可以放到th中. <!DOCTYPE HTML> <html> &
-
利用jQuery实现一个简单的表格上下翻页效果
前言 本文主要介绍的是利用jQuery实现一个简单的表格上下翻页效果,注:实现原理与轮播图相似.下面话不多说,来看看详细的 实现方法吧. html: <div class="popup day02-popup04"> <div class="group-caption"> <span>日期</span><span>参与团购场次</span><span class="result&
-
JQuery实现可编辑的表格实例讲解（2）
我们最终要达到的效果如下: 当单击学号列的时候,可以进行编辑: 当单击ESC的时候,操作取消,当单击回车的时候,修改生效(没有与后台交互) 页面代码如下(asp.net): <%@ Page Language="C#" AutoEventWireup="true" CodeFile="EditTable.aspx.cs" Inherits="EditTable" %> <!DOCTYPE html PUBLI
-
jQuery实现可编辑的表格
前言 上一篇博客更新了在页面中如何判断用户名是否已经被输入,这篇博客介绍一下页面中的表格内容如何像Excle表格一样修改. 内容 显示效果 照例,先上代码 HTML代码: <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; char
-
基于JQuery制作可编辑的表格特效
最近做了个项目,其中项目要求:点击表格后可直接编辑,回车或鼠标点击页面其他地方后编辑生效,按Esc可取消编辑 2个小伙伴给出了2中解决方案,大家来看看哪种更合适呢? 第一种单击表格可以编辑的方法 复制代码 代码如下: //相当于在页面中的 body标签加上onload事件 $(function() { //找到所有的td节点 var tds = $("td"); //给所有的td添加点击事件 tds.click(function() {
-
JQuery实现可直接编辑的表格
本文实例讲述了JQuery实现可直接编辑的表格.分享给大家供大家参考.具体分析如下: 功能: 创建一个表格,用户单击某个单元格后,可以直接修改单元格文本. 在编辑状态下,用户可按回车键确认修改,按ESC键撤销修改. 效果如下图: 思路: 当用户点击某个单元格后,立即向该单元格内插入一个文本框,将它的宽.高都设置成与单元格相的数值.用户确认输入后,清空该单元格内的所有HTML代码,然后把内容设置为用户刚刚输入的文本. HTML代码: <table align="center">
-
jQuery 实现双击编辑表格功能
先给大家展示下效果图: 下面用简单方法实现的简单表格编辑功能: 简单的HTML代码略过了,下面是js实现过程 JavaScript: <span style="font-size:18px;">$(".tables").on("dblclick","td",function(){ if($(this).children("input").length>0){ return false; }
-
jquery学习笔记二 实现可编辑的表格
实现可编辑的表格demo: 实例图: 代码: 复制代码 代码如下: <!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 runa