可编辑表格总结.docxVIP

JQuery可编辑表格小结2010/11/23页面说明：JQuery源代码：jquery.js；CSS样式：style.css；可编辑表格的JS：table.js；jsp页面:index.jspJsp页面代码如下：%@pagelanguage=javaimport=java.util.*pageEncoding=utf-8%!DOCTYPEHTMLPUBLIC-//W3C//DTD HTML 4.01 Transitional//ENhtmlheadtitleJQuery + Demo/titlelinkrel=stylesheettype=text/csshref=style.css/scripttype=text/javascriptsrc=jquery.js/scriptscripttype=text/javascriptsrc=table.js/script/headbodybr/br/tabletheadtrthcolspan=2可编辑表格/th/tr/theadtbodytrth编号/thth姓名/th/trtrtd00001/tdtd张山/td/trtrtd00002/tdtd李四/td/trtrtd00003/tdtd王五/td/trtrtd00004/tdtd赵六/td/tr/tbody/table/body/htmlCSS样式源代码：TABLE{border:1pxsolidblack;/**修正边框不能合并*/border-collapse:collapse;width:400px;}TABLE TD{border:1pxsolidblack;cursor:hand; width:50%}TABLE TH{border:1pxsolidblack;width:50%}TBODY TH{background-color:blue;}可编辑表格JS源代码：/***首先通过js来解决内容部分奇偶行的背景色不同*页面启动时加载：*$(document).ready(function(){});*///简便写法$(function(){//找到表格内容区域的所有奇数行//使用even是为了通过tbodytr返回所有的tr元素，//在数组下标是偶数的元素返回，因为这些元素，//实际上才是我们期望的tbody里面的奇数行$(tbody tr:even).css(background-color, #ECE9D8);//首先找到所有的编号单元格//$(tbody td:even).css(background-color, red);var aryTd = $(tbody td:even);//给这些单元格注册鼠标点击事件aryTd.click(function(){/*一般写法//找到当前鼠标点击的Td,this，就是对应相应click的tdvar tdObj = $(this);//创建一个文本框（创建一个节点）var inputObj = $(input type=text /);//去掉文本框的边框inputObj.css(border-width, 0);//设置文本框中文字的大小inputObj.css(font-size,15px);//是文本框的宽度和td的宽度相同inputObj.width(tdObj.width());//设置文本框的背景色inputObj.css(background-color, tdObj.css(background-color));//插入之前需要将当前td中的内容放置到文本框inputObj.val(tdObj.html());//清空td中的内容tdObj.html();//插入一个文本框到td中inputObj.appendTo(tdObj);*//*精简写法*///找到当前鼠标点击的Td,this，就是对应相应click的tdvar tdObj = $(this);/**虽然点击input不会错，但单击td还是会出差bug*解决方法：判断td中是否有input*/if(tdObj.children(input).length 0){returnfalse;}//td中的文本内容：var text = tdObj.html();//清空td中的内容tdObj.html();/***1、创建一个文本框（创建一个节点）*2、去掉文本框的边框*3、设置文本框中文字的大小*4、文本框的宽度和td的宽度相同*5、设置文本框的背景色*6、插入之前需要将当前td中的内容放置到文本框*7、插入一个文本框到td中*/var inputObj = $(input type=text /).css(border-width, 0).css(font-size,tdObj.css(font