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 runat="server">
<title></title>
<script type="text/jscript" src="jquery-1.4.2.min.js"></script>
<script type="text/jscript" language="javascript">
//简化的ready写法:页面加载完成时候调用
$(function() {
//将tbody内的偶数tr的背景颜色设置为#ECE9D8
$("tbody tr:even").css("background-color", "#ECE9D8");
//将tbody内的偶数td设置为numTd
var numTd = $("tbody td:even");
//给这些单元格注册鼠标点击的事件
numTd.click(function() {
//取点击到元素的jquery对象
var tdObj = $(this);
//如果点击的元素包含input控件则不执行click处理
if (tdObj.children("input").length > 0) {
return false;
}
//取td内容附值到text
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);
//设置触发器先触发focus事件再触发select事件
inputObj.trigger("focus").trigger("select");
//是文本框插入之后就被选中
inputObj.click(function() {
return false;
});
//注册keyup事件
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);
}
});
});
});
</script>
<style type="text/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-color: #A3BAE9;
}
</style>
</head>
<body>
<form id="form1" runat="server">
<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>
</form>
</body>
</html>
知识点：
1.$(function() {})是$(document).ready(function() {})的简写。
2.$("tbody td:even")中“：”表示过滤，even为偶数函数，筛选条件可以在帮助文档的选择器中查找。此句表示返回tbody内的偶数td，结果为集合。
3.在事件中$(this)将返回此控件的jquery对象。
4.children("input")表示取所有子元素包含input的jquery对象，结果为集合。
5.css("border-width", "0")表示设置css属性的值。
6.trigger("focus").trigger("select")表示设置事件先触发focus，再触发select。
7.keyup(function(event) {var keycode = event.which;})表示注册键盘事件，参数event的which属性存储键盘信息。
相关推荐
-
基于Bootstrap使用jQuery实现简单可编辑表格
editTable.js 提供编辑表格当前行.添加一行.删除当前行的操作,其中可以设置参数,如: operatePos 用于设置放置操作的列,从0开始,-1表示以最后一列作为放置操作的列:(这里的操作包括 编辑当前行.在当前行下添加一行.删除当前行) handleFirst 设置表格的第一行是否作为操作的对象,true为真,false为假: edit.save.cancel.add.confirm.del 分别设置显示操作的操作名,默认显示"编辑"."保存".&qu
-
用Jquery实现可编辑表格并用AJAX提交到服务器修改数据
下面是js Code: 复制代码 代码如下: $(function() { // 相当于在页面中的body标签加上onload事件 $(".caname").click(function() { // 给页面中有caname类的标签加上click函数 var objTD = $(this); var oldText = $.trim(objTD.text()); // 保存老的类别名称 var input = $("<input type='text' value='&
-
基于PHP+Jquery制作的可编辑的表格的代码
table.php 复制代码 代码如下: <?php header("Content-Type:text/html;charset=utf-8"); $mysqli=new MySQLi("localhost","root","123456","xiaoqiangdb"); if(mysqli_connect_errno){ echo "连接数据库失败".mysqli_connec
-
jQuery(非HTML5)可编辑表格实现代码
功能: 单击单元格选中,选中过程中使用方向键更换选中的单元格,选中过程中按回车键或者直接双击单元格进入可编辑状态,单元格失去焦点时保存修改的内容. 主要实现思路: 选中,移动选中区域等都是依靠jQuery强大的API进行实现的.而可编辑的单元格实际上是在选中单元格时,在单元格上面添加个input输入域,动态的更新数据 源代码: HTML代码: 复制代码 代码如下: <table class="editableTable"> <thead> <tr>
-
jQuery一步一步实现跨浏览器的可编辑表格，支持IE、Firefox、Safari、Chrome、Opera
要实现可编辑的表格功能,我们要解决以下问题: 1.明确要修改的数据在表格中是哪些列(如何找到这些单元格); 2.如何让单元格变成可以编辑的; 3.如何处理单元格的一些按键事件; 4.解决跨浏览器问题. 我们通过jQuery可以一步一步解决上述问题. 一. 绘制表格 首先我们先画好一个表格. Code1: 复制代码 代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://ww
-
jQuery实现的可编辑表格完整实例
本文实例讲述了jQuery实现的可编辑表格.分享给大家供大家参考,具体如下: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; cha
-
BootStrap和jQuery相结合实现可编辑表格
editTable.js 提供编辑表格当前行.添加一行.删除当前行的操作,其中可以设置参数,如: operatePos 用于设置放置操作的列,从0开始,-1表示以最后一列作为放置操作的列:(这里的操作包括 编辑当前行.在当前行下添加一行.删除当前行) handleFirst 设置表格的第一行是否作为操作的对象,true为真,false为假: edit.save.cancel.add.confirm.del 分别设置显示操作的操作名,默认显示"编辑"."保存".&qu
-
jQuery+PHP实现可编辑表格字段内容并实时保存
本例适用场景:当查看详细资料,如用户详情信息,发现其中某几个字段信息需要修改,可直接点击该字段内容进行修改,节约了用户时间,(传统的做法是进入一个编辑页面,列出所有编辑的字段信息,即使你只需要编辑其中一两个字段内容,然后点击提交)提高了WEB响应速度,从而提高了前端用户体验. 本例依赖jquery库,并基于插件,具有以下特点: 实时编辑,后台实时响应,并即时完成局部刷新. 可自定义输入表单类型,目前jeditable提供text,select,textarea类型. 响应键盘的回车和ESC键.
-
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实现可编辑的表格实例讲解（2）
我们最终要达到的效果如下: 当单击学号列的时候,可以进行编辑: 当单击ESC的时候,操作取消,当单击回车的时候,修改生效(没有与后台交互) 页面代码如下(asp.net): <%@ Page Language="C#" AutoEventWireup="true" CodeFile="EditTable.aspx.cs" Inherits="EditTable" %> <!DOCTYPE html PUBLI
-
基于JQuery制作可编辑的表格特效
最近做了个项目,其中项目要求:点击表格后可直接编辑,回车或鼠标点击页面其他地方后编辑生效,按Esc可取消编辑 2个小伙伴给出了2中解决方案,大家来看看哪种更合适呢? 第一种单击表格可以编辑的方法 复制代码 代码如下: //相当于在页面中的 body标签加上onload事件 $(function() { //找到所有的td节点 var tds = $("td"); //给所有的td添加点击事件 tds.click(function() {