JQuery可编辑表格小结.docx

JQuery可编辑表格小结2010/11/23页面说明：JQuery源代码：jquery.js；CSS样式：style.css；可编辑表格的JS：table.js；jsp页面:index.jspJsp页面代码如下： JQuery + Demo 可编辑表格 编号姓名 00001 张山 00002 李四 00003 王五 00004 赵六 CSS样式源代码：TABLE border: 1px solid black;/*修正边框不能合并*/border-collapse: collapse;width: 400px;TABLE TD border: 1px solid black;cursor: hand; width: 50%TABLE THborder: 1px solid black;width: 50%TBODY THbackground-color: blue;可编辑表格JS源代码：/* *首先通过js来解决内容部分奇偶行的背景色不同 *页面启动时加载： * $(document).ready(function(); */简便写法$(function()/找到表格内容区域的所有奇数行/使用even是为了通过tbody tr 返回所有的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 = $();/去掉文本框的边框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)return false;/td中的文本内容：var text = tdObj.html();/清空td中的内容tdObj.html();/* * 1、创建一个文本框（创建一个节点） * 2、去掉文本框的边框 * 3、设置文本框中文字的大小 * 4、文本框的宽度和td的宽度相同 * 5、设置文本框的背景色 * 6、插入之前需要将当前td中的内容放置到文本框 * 7、插入一个文本框到td中 */var inputObj = $().css(border-width, 0).css(font-size,tdObj.css(font-size).width(tdObj.width().css(background-color, tdObj.css(background-color).val(text).appendTo(tdObj);/使文本框选中get(0)实际的DOM 元素,但此时在苹果浏览器中不能选中/inputObj.get(0).select();/*原因：先获得焦点，后选中 * 解决方法：用JQuery的返回值:事件处理*/inputObj.trigger(focus).trigger(select);/再次点击文本框，会有bug，是因为文本框属于TD,因此屏蔽文本框的click事件inputObj.click(function()/返回false,停止传播return false;);/处理文本框上回车和esc按键的操作inputObj.keyup(function(event)/获得键值var keyCode = event.which;/处理回车if(13 = keyCode)/获取当前文本框中的内容var inputText = $(this).val();tdObj.html(inputText);/处理esc的情况if(27 = keyCode)/将td中的内容还原tdObj.html(text););/处理文本框失去焦点inputObj.blur(function()/获取当前文本框中的内容var inputText = $(this).val();tdObj.html(inputText););/清除td下的文本框tdObj.remove(input);););小结：1 table中可以包含thead和tbody2 表头的内容放置在th中3 table这种写法称为标签选择器，可以对整个页面所有table产生影响。4 table td这种写法表示的是table中包含的所有td5 可以通过 border-collapse:collapse这种方式来使表格的单元格的边框合并6 当th上有背景色时，这个th属于的tr上定义背景色会无效7 $(function()是$(document.ready(function()的简化方法8 $(tbody tr)可以返回tbody中的所有tr节点9 $(tbody tr:even)可以方法tbody中所有索引值是偶数的tr节点10 CSS方法可以用于设置或获取节点的CSS属性，参数名是css的属性名11 JQuery的对象内容包含着选择器对应的DOM节点，以数组形式保存12 tet方法可以获得JQuery对象包含的某一个DOM节点13 function 中的this代表执行这个function的对象14 $()方法的参数是一个DOM对象时，这个方法相当于把DOM对象转换成JQuery对象15 children方法可以获取某个节点的子节，可以制定参数来限制子节点的内容16 如果选择器返回的Jquery对象包含多个DOM节点，在这个对象上主持类似click这样的事件时，所有DOM节点都会用于事件17 html方法可以设置或获取节点的HTML内容18 val方法可以获取或设置节点的value值19 $()方法的参数如果是一段正确的HTML文本，则可以创建一个DOM节点，并包装成JQuery对象20 JQuery大部分方法都会返回执行这个方法的JQuery对象，因此可以采用链式方法的写法来编写给予JQuery的代码21 width方法可以设置或获取某个节点的宽度22 appendTo方法将一个节点追加到另一个节点所有子节点的后面23 阻止事件传递可以让当前节点的事件返回false24 trig