jQuery可编辑表格.docx

1 可编辑的表格editTable.csstable 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; editTable.js/需要首先通过Javascript来解决内容部分奇偶行的背景色不同/$(document).ready(function()/);/简化的ready写法$(function()/找到表格的内容区域中所有的奇数行/使用even是为了把通过tbody tr返回的所有tr元素中，在数组里面下标是偶数的元素返回，因为这些元素，实际上才是我们期望的tbody里面的奇数行$(tbody tr:even).css(background-color,#ECE9D8);/我们需要找到所有的学号单元格var numTd = $(tbody td:even);/给这些单元格注册鼠标点击的事件numTd.click(function() /找到当前鼠标点击的td,this对应的就是响应了click的那个tdvar 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 = $().css(border-width,0).css(font-size,16px).width(tdObj.width().css(background-color,tdObj.css(background-color).val(text).appendTo(tdObj);/是文本框插入之后就被选中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的情况if (keycode = 27) /将td中的内容还原成texttdObj.html(text););););editTable.htmlJQuery实例2：可以编辑的表格鼠标点击表格项就可以编辑学号姓名000001张三000002李四000003王五000004赵六横向纵向菜单menu.cssul, li /*清除ul和li上默认的小圆点*/list-style: none;ul /*清除子菜单的缩进值*/padding: 0;margin: 0;.main, .hmain background-image: url(./images/title.gif);background-repeat: repeat-x;width: 120px;li background-color: #EEEEEE;a /*取消所有的下划线*/text-decoration: none;padding-left: 20px;display: block;display: inline-block;width: 100px;padding-top: 3px;padding-bottom: 3px;.main a, .hmain a color: white;background-image: url(./images/collapsed.gif);background-repeat: no-repeat;background-position: 3px center;.main li a, .hmain li a color: black;background-image: none;.main ul, .hmain ul display: none;.hmain float: left;margin-right: 1px;menu.js$(document).ready(function()/页面中的DOM已经装载完成时，执行的代码$(.main a).click(function()/找到主菜单项对应的子菜单项var ulNode = $(this).next(ul);/*if (ulNode.css(display) = none) ulNode.css(display,block); else ulNode.css(display,none);*/ulNode.show(slow);/normal fast/ulNode.hide();/ulNode.toggle();/ulNode.slideDown(slow);/ulNode.slideUp;ulNode.slideToggle();changeIcon($(this););$(.hmain).hover(function()$(this).children(ul).slideDown();changeIcon($(this).children(a);,function()$(this).children(ul).slideUp();changeIcon($(this).children(a);););/* * 修改主菜单的指示图标 */function changeIcon(mainNode) if (mainNode) if (mainNode.css(background-image).indexOf(collapsed.gif) = 0) mainNode.css(background-image,url(images/expanded.gif); else mainNode.css(background-image,url(images/collapsed.gif);、menu.htmlJQuery实战-菜单效果菜单项1子菜单项11子菜单项12菜单项2子菜单项21子菜单项22菜单项3子菜单项31子菜单项32菜单项1子菜单项11子菜单项12菜单项2子菜单项21子菜单项22菜单项3子菜单项31子菜单项323 窗口效果window.css.window background-color: #D0DEF0; width: 250px; /*padding: 2px;*/ margin: 5px;/*控制窗口绝对定位*/ position: absolute; display: none;.content height: 150px; background-color: white; border: 2px solid #D0DEF0; padding: 2px;/*控制区域内容超过指定高度和宽度时显示滚动条*/ overflow: auto;.title padding: 4px; font-size: 14px;.title img width: 14px; height: 14px; float: right; cursor: pointer;window.js$(document).ready(function()/1.点击按钮可以在屏幕中间显示一个窗口/2.点击按钮2可以在屏幕的左下角显示一个窗口/3.页面装载完成后，可以在屏幕右下角飘上一个窗口，并且窗口慢慢淡出 /* *$(.title img).click(function() * /关闭按钮点击之后，关闭窗口 * $(this).parent().parent().hide(slow); *); */var centerwin = $(#center);var leftwin = $(#left);var rightwin = $(#right);$(#centerpop).click(function()/鼠标点击按钮之后，把id为center的窗口显示在页面中间/计算位于屏幕中间的窗口的左边界和上边界的值/浏览器可视区域的宽和高，当前窗口的宽和高/需要考虑到横向滚动条的当前左边界值以及纵向滚动条的当前上边界值centerwin.show(slow););$(#leftpop).click(function() leftwin.slideDown(slow););setTimeout(function () centerwin.mywin(left: center, top: center);leftwin.mywin(left: left, top: bottom, function()leftwin.slideUp(slow););var windowobj = $(window);var cwinwidth = rightwin.outerWidth(true);var cwinheight = rightwin.outerHeight(true);var browserwidth = windowobj.width();var browserheight = windowobj.height();varscrollLeft = windowobj.scrollLeft();varscrollTop = windowobj.scrollTop();var rleft = scrollLeft + browserwidth - cwinwidth;if ($.browser.safari) rleft = rleft - 15;if ($.browser.opera) rleft = rleft + 15;if ($.browser.msie & $.browser.version.indexOf(8) = 0) rleft = rleft - 20;rightwin.mywin(left: right, top: bottom, function() rightwin.hide();,left: rleft, top: scrollTop + browserheight).fadeOut(15000).dequeue();,500););/* *$.fn.hello = function() * alert(hello: + this.val(); * return this; * */* *param position表示窗口的最终位置,包含两个属性，一个是left，一个是top *param hidefunc表示执行窗口隐藏的方法 *param initPos表示窗口初始位置，包含两个属性，一个是left，一个是top */$.fn.mywin = function(position, hidefunc, initPos) if (position & position instanceof Object) var positionleft = position.left;var positiontop = position.top;var left;var top;var windowobj = $(window);var currentwin = this;var cwinwidth;var cwinheight;var browserwidth;var browserheight;var scrollLeft;var scrollTop;/计算浏览器当前可视区域的宽和高，以及滚动条左边界，上边界的值function getBrowserDim() browserwidth = windowobj.width();browserheight = windowobj.height();scrollLeft = windowobj.scrollLeft();scrollTop = windowobj.scrollTop();/计算窗口真实的左边界值function calLeft(positionleft, scrollLeft, browserwidth, cwinwidth) if (positionleft & typeof positionleft = string) if (positionleft = center) left = scrollLeft + (browserwidth - cwinwidth) / 2; else if (positionleft = left) left = scrollLeft; else if (positionleft = right) left = scrollLeft + browserwidth - cwinwidth;if ($.browser.safari) left = left - 15;if ($.browser.opera) left = left + 15;if ($.browser.msie & $.browser.version.indexOf(8) = 0) left = left - 20; else left = scrollLeft + (browserwidth - cwinwidth) / 2; else if (positionleft & typeof positionleft = number) left = positionleft; else left = 0;/计算窗口真实的上边界值function calTop(positiontop, scrollTop, browserheight, cwinheight) if (positiontop & typeof positiontop = string) if (positiontop = center) top = scrollTop + (browserheight - cwinheight) / 2; else if (positiontop = top) top = scrollTop; else if (positiontop = bottom) top = scrollTop + browserheight - cwinheight;if ($.browser.opera) top = top - 25; else top = scrollTop + (browserheight - cwinheight) / 2; else if (positiontop & typeof positiontop = number) top = positiontop; else top = 0;/移动窗口的位置function moveWin() calLeft(currentwin.data(positionleft), scrollLeft, browserwidth, cwinwidth);calTop(currentwin.data(positiontop), scrollTop, browserheight, cwinheight);currentwin.animate(left: left,top: top,600);/定义关闭按钮的动作currentwin.children(.title).children(img).click(function() if (!hidefunc) currentwin.hide(slow); else hidefunc(););if (initPos & initPos instanceof Object) var initLeft = initPos.left;var initTop = initPos.top;if (initLeft & typeof initLeft = number) currentwin.css(left, initLeft); else currentwin.css(left, 0);if (initTop & typeof initTop = number) currentwin.css(top, initTop); else currentwin.css(top, 0);currentwin.show();cwinwidth = currentwin.outerWidth(true);cwinheight = currentwin.outerHeight(true);currentwin.data(position