基于jQuery实现可编辑的表格
前言
我们知道jQuery是一个轻便的JavaScript框架，里面封装了系统和程序常用到的一些方法，利用CSS、HTML可以将这些内容运用起来，做出各式各样好看的界面，下面小编使用jQuery实现了一个“可编辑的表格”的例子。
代码加说明
一、HTML代码
1.使用<thead></thead>实现标头；
2.一个table中可以包含thead和tbody
3.表头的内容可以放到th中。
<!DOCTYPE HTML> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <title>JQuery实战2-可编辑的表格</title> <link href="css/editTable.css" type="text/css" rel="stylesheet" /> <script type="text/javascript" src="js/jquery.js"></script> <script type="text/javascript" src="js/editTable.js"></script> </head> <body> <table> <thead> <tr> <th colspan=2>鼠标点击表格项就可以编辑</th> </tr> </thead> <tbody> <tr> <th>学号</th> <th>姓名</th> </tr> <tr> <td>001</td> <td>周星驰</td> </tr> <tr> <td>002</td> <td>星女郎</td> </tr> <tr> <td>003</td> <td>周润发</td> </tr> <tr> <td>004</td> <td>赌神</td> </tr> </tbody> </table> </body> </html>
二、CSS代码
1.table{}称作标签选择器，可以对整个页面所有table产生影响；
2.table td{} 表示table中包含的所有td；
3.border_collapse:collape 使表格中的单元格的边框合并
table{
border:1px solid black;
border-collapse:collapse;
/* 修正单元格之间的边框不能合并的问题*/
width:400px;
}
table th{
border:1px solid black;
width:50%;
}
table td{
border:1px solid black;
width:50%;
}
tbody th{
background-color:#A3BAE9;
}
三、JavaScript文件代码
1.用来解决奇偶行背景色不同；
2.$(function(){})与$(documnet).ready(function(){})等价；
$("tbody tr") 可以返回tbody中所有tr节点；
$("tbody tr:even") 可以返回tbody中所有索引值是偶数的tr节点；
3.$()方法的参数如果是一个DOM对象时，这个方法相当于把DOM对象转换成jQuery对象；
$()方法的参数如果是一段正确的HTML文本，则可以创建一个DOM节点，并包装成jQuery对象。
$(function(){
//找到表格偶数行
//odd是数组中下标为奇数的项，even是下标为偶数的项
$("tbody tr:even").css("background-color","#ECE9D8");
//找到所有学号的单元格
var numId=$("tbody td:even");
//给这些单元格注册点击事件
numId.click(function(){
//找到当前鼠标点击的td
var tdObj=$(this);
//
if(tdObj.children("input").length>0){
//当前td中的input，不执行click处理
return false;
}
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"))
.css("font",tdObj.css("font"))
.val(text)
.appendTo(tdObj);
//文本框插入后被选中
//inputObj.get(0).select();
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情况,
//将td的内容还原成text
if(keycode==27){
tdObj.html(text);
}
});
});
});
小结
关于jQuery的学习，不只是停留在例子上面，我们还要从中不断地深入，理解并能够运用起来。
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。
相关推荐
-
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
-
jQuery+PHP实现可编辑表格字段内容并实时保存
本例适用场景:当查看详细资料,如用户详情信息,发现其中某几个字段信息需要修改,可直接点击该字段内容进行修改,节约了用户时间,(传统的做法是进入一个编辑页面,列出所有编辑的字段信息,即使你只需要编辑其中一两个字段内容,然后点击提交)提高了WEB响应速度,从而提高了前端用户体验. 本例依赖jquery库,并基于插件,具有以下特点: 实时编辑,后台实时响应,并即时完成局部刷新. 可自定义输入表单类型,目前jeditable提供text,select,textarea类型. 响应键盘的回车和ESC键.
-
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实现可编辑表格并用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实现的可编辑表格完整实例
本文实例讲述了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实现可编辑表格并生成json结果(实例代码)
实现效果如下,在编辑表格的同时可以实现字段json内容的自动变化,点击提交可以保存到后台,页面加载的时候自动解析json并加载表格内容.该代码解析和加载功能都用前端js实现,简化了后台代码逻辑. 定义要操作的表格头: <input readonly="readonly" class="form-control" type="text" id="scorerange" value="" name=&qu
-
BootStrap和jQuery相结合实现可编辑表格
editTable.js 提供编辑表格当前行.添加一行.删除当前行的操作,其中可以设置参数,如: operatePos 用于设置放置操作的列,从0开始,-1表示以最后一列作为放置操作的列:(这里的操作包括 编辑当前行.在当前行下添加一行.删除当前行) handleFirst 设置表格的第一行是否作为操作的对象,true为真,false为假: edit.save.cancel.add.confirm.del 分别设置显示操作的操作名,默认显示"编辑"."保存".&qu
-
基于jQuery实现可编辑的表格
前言 我们知道jQuery是一个轻便的JavaScript框架,里面封装了系统和程序常用到的一些方法,利用CSS.HTML可以将这些内容运用起来,做出各式各样好看的界面,下面小编使用jQuery实现了一个"可编辑的表格"的例子. 代码加说明 一.HTML代码 1.使用<thead></thead>实现标头: 2.一个table中可以包含thead和tbody 3.表头的内容可以放到th中. <!DOCTYPE HTML> <html> &
-
基于JQuery制作可编辑的表格特效
最近做了个项目,其中项目要求:点击表格后可直接编辑,回车或鼠标点击页面其他地方后编辑生效,按Esc可取消编辑 2个小伙伴给出了2中解决方案,大家来看看哪种更合适呢? 第一种单击表格可以编辑的方法 复制代码 代码如下: //相当于在页面中的 body标签加上onload事件 $(function() { //找到所有的td节点 var tds = $("td"); //给所有的td添加点击事件 tds.click(function() {
-
基于jQuery实现的无刷新表格分页实例
本文实例讲述了基于jQuery实现的无刷新表格分页.分享给大家供大家参考,具体如下: 效果图如下: html结构: <table id="cs_table" class="datatable"></table> css样式: html,body{margin: 0;padding:0} a:focus {outline: none;} /* 通用表格显示 */ table, th, td {font: 12px Arial,Helvetica
-
利用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实现可编辑的表格实例讲解（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的动态删除Table表格的行和列的代码
首先要获取Table表格的行数,我是通过后台添加表格的所以我在前台获取的时候length一下就获取到了总数赋值例如上图: 如果我要打印这个表格但不想要操作那列的内容咋办? 复制代码 代码如下: for(var i=0;i<num+1;i++) { $("table tr").eq(i).find("td").eq(0).remove(); } 解释: num是从后台获取到的列表总和+1是为了表头那个也去掉. 第一个eq(i)是获取Table里的TR索引 第二个
-
基于jquery的实现简单的表格中增加或删除下一行
代码如下: html 复制代码 代码如下: <div> <table> <tr><td>1111</td><td><input type="button" value="添加下一行" /><input type="button" value="删除下一行" /></td></tr> <tr><
-
editable.js 基于jquery的表格的编辑插件
我的思路是这样的: 1.对任何一个 table, tr 都可以添加编辑.删除功能--功能独立 2.可以自动的完成编辑.取消功能,如点击编辑, 表格内容自动变成编辑框.下拉框等, 点击取消结束编辑状态 3.添加删除.确定(即更新)事件--只需要添加自己服务端的删除.更新代码就可以 4.能够自定义设置可编辑列,不可编辑列--方便定制编辑功能 下面是我实现的功能代码: editable.js 复制代码 代码如下: /* code: editable.js version: v1.0 date: 201