jQuery实现可编辑的表格
前言
上一篇博客更新了在页面中如何判断用户名是否已经被输入，这篇博客介绍一下页面中的表格内容如何像Excle表格一样修改。
内容
显示效果
照例，先上代码
HTML代码：
<!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title></title> <script src="script/jquery-1.8.2.js"></script> <script type="text/javascript" src="script/EditTable.js"></script> <link href="CSS/EditTable.css" rel="stylesheet" /> </head> <body> <table> <thead> <tr> <th colspan="2">鼠标点击表格项就可以编辑</th> </tr> </thead> <tbody> <tr> <th>学号</th> <th>姓名</th> </tr> <tr> <td>0000001</td> <td>张三</td> </tr> <tr> <td>0000002</td> <td>李四</td> </tr> <tr> <td>0000003</td> <td>王五</td> </tr> <tr> <td>0000004</td> <td>赵六</td> </tr> </tbody> </table> </body> </html>
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;
}
JavaScript代码：
//需要首先通过JavaScript来解决内容部分奇偶行的背景不同
$(function () {
//找到表格的内容区域中所有的偶数行
$("tbody tr:even").css("background-color", "#ECE9D8");
//找到所有可以编辑的单元格
var numTd = $("tbody td:even");
//给这些单元格注册鼠标点击的事件
numTd.click(function () {
//找到当前鼠标点击的td，this对应的就是响应了click的那个td
var tdObj = $(this);
if (tdObj.children("input").length>0) {
//当前td中有内容，不执行click操作
return false;
}
var text = tdObj.html();
tdObj.html("");
//创建一个文本框
//去掉文本框的边框
//设置文本框中的文字字体大小事15px
//是文本框的宽度和td的宽度相同
//设置文本框的背景色
//需要将当前td中的内容放到文本框中
//清空td中的内容
//文本框插入到td中去
var inputObj = $("<input type='text'>").css("border-width", "0").css("font-size", "15px").css("background-color", tdObj.css("background-color")).width(tdObj.width()).val(tdObj.html()).val(text).appendTo(tdObj);
//使得文本框插入之后就被选中
inputObj.trigger("focus").trigger("select");
inputObj.click(function () {
return false;
});
//处理文本框上回车和esc按键的操作
inputObj.keyup(function () {
//获取当前按下键盘的键值
var keycode = event.which;
//处理回车的情况
if (keycode == 13) {
//获取到当前文本框中的内容
var inputtext = $(this).val();
//将td的内容修改成文本框中的内容
tdObj.html(inputtext);
}
//处理esc的情况
if (keycode == 27) {
tdObj.html(text);
}
});
});
});
这次代码稍微有点长，但是对于一目十行的大神们来说这都不算啥！
总结
HTML知识点：
- table中可以包含thead和tbody
- 表头的内容可以放到th中
CSS知识点：
- table{}这种写法称作标签选择器，可以对整个页面所有的table产生影响
- table td{}这种写法表示的是table中包含的所有td
- 可以通过border-collapse：collapse这种方式来使表格中的单元格的边框合并
- 当th上有背景色，这个th属于的tr上定义的背景色会无效
- css方法可以用于设定或获取节点的css属性，参数名是css的属性名
JavaScript知识点：
- (function())是(function())是(document).ready(function(){})的简化写法
- $(“tbody tr”)可以返回tbody中的所有tr节点
- $(“tbody tr:even”)可以返回tbody中所有索引值是偶数的tr节点
- jQuery的对象内容包含着选择器对应的DOM节点，以数组形式保存
- get方法可以获得jQuery对象中包含的某一个DOM节点
- function中的this代表执行这个function的对象
- $()方法的参数是一个DOM对象时，这个方法相当于把DOM对象转换成jQuery对象
- children方法可以获得某个节点的子节点，可以指定参数来限制子节点的内容
- 如果选择器返回的jQuery对象中包含多个DOM节点，在这个对象上注册类是click这样的时间是，所有DOM节点都会用于事件
- html方法可以设置或获取节点的HTML内容
- val方法可以获取或设置节点的value值
- $()方法的参数如果是一段正确的HTML文本，则可以创建一个DOM节点，并包装成jQuery对象
- jQuery大部分方法都会返回执行这个方法的jQuery对象，因此可以采用链式方法的写法来编写给予jQuery的代码
- width方法可以设置或获取某个节点的宽度
- appendTo方法可以将一个节点追加到另一个节点所有子节点的后面
- 阻止事件传递可以让当前节点的事件返回false
- trigger该方法可以触发某个JavaScript的事件发生
- jQuery中某个实践方法的参数function上可以定义一个event的参数，jQuery会屏蔽浏览器的event差异，传给我们一个可用的event对象
- jQuery的event对象上有一个which的属性，可以获得键盘按键的值
- 13表示回车键，27表示ESC键
end
谢谢您的阅读！
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。
相关推荐
-
jQuery实现可编辑表格并生成json结果(实例代码)
实现效果如下,在编辑表格的同时可以实现字段json内容的自动变化,点击提交可以保存到后台,页面加载的时候自动解析json并加载表格内容.该代码解析和加载功能都用前端js实现,简化了后台代码逻辑. 定义要操作的表格头: <input readonly="readonly" class="form-control" type="text" id="scorerange" value="" name=&qu
-
jQuery+PHP实现可编辑表格字段内容并实时保存
本例适用场景:当查看详细资料,如用户详情信息,发现其中某几个字段信息需要修改,可直接点击该字段内容进行修改,节约了用户时间,(传统的做法是进入一个编辑页面,列出所有编辑的字段信息,即使你只需要编辑其中一两个字段内容,然后点击提交)提高了WEB响应速度,从而提高了前端用户体验. 本例依赖jquery库,并基于插件,具有以下特点: 实时编辑,后台实时响应,并即时完成局部刷新. 可自定义输入表单类型,目前jeditable提供text,select,textarea类型. 响应键盘的回车和ESC键.
-
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
-
jQuery(非HTML5)可编辑表格实现代码
功能: 单击单元格选中,选中过程中使用方向键更换选中的单元格,选中过程中按回车键或者直接双击单元格进入可编辑状态,单元格失去焦点时保存修改的内容. 主要实现思路: 选中,移动选中区域等都是依靠jQuery强大的API进行实现的.而可编辑的单元格实际上是在选中单元格时,在单元格上面添加个input输入域,动态的更新数据 源代码: HTML代码: 复制代码 代码如下: <table class="editableTable"> <thead> <tr>
-
用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='&
-
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 实现双击编辑表格功能
先给大家展示下效果图: 下面用简单方法实现的简单表格编辑功能: 简单的HTML代码略过了,下面是js实现过程 JavaScript: <span style="font-size:18px;">$(".tables").on("dblclick","td",function(){ if($(this).children("input").length>0){ return false; }
-
BootStrap和jQuery相结合实现可编辑表格
editTable.js 提供编辑表格当前行.添加一行.删除当前行的操作,其中可以设置参数,如: operatePos 用于设置放置操作的列,从0开始,-1表示以最后一列作为放置操作的列:(这里的操作包括 编辑当前行.在当前行下添加一行.删除当前行) handleFirst 设置表格的第一行是否作为操作的对象,true为真,false为假: edit.save.cancel.add.confirm.del 分别设置显示操作的操作名,默认显示"编辑"."保存".&qu
-
基于Bootstrap使用jQuery实现简单可编辑表格
editTable.js 提供编辑表格当前行.添加一行.删除当前行的操作,其中可以设置参数,如: operatePos 用于设置放置操作的列,从0开始,-1表示以最后一列作为放置操作的列:(这里的操作包括 编辑当前行.在当前行下添加一行.删除当前行) handleFirst 设置表格的第一行是否作为操作的对象,true为真,false为假: edit.save.cancel.add.confirm.del 分别设置显示操作的操作名,默认显示"编辑"."保存".&qu
-
利用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实现可编辑的表格实例讲解（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学习笔记二 实现可编辑的表格
实现可编辑的表格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