可编辑的表格：
屏幕剪辑的捕获时间: 2015/8/14 9:16
HTML代码为：
<!DOCTYPE html> <htmlxmlns="http://www.w3.org/1999/xhtml"> <head> <metahttp-equiv="Content-Type" content="text/html;charset=utf-8"/> <title>JQuery实例二：可编辑的表格</title> <link href="Edit.css"rel="stylesheet" /> <scriptsrc="jquery.js"></script> <scriptsrc="edit.js"></script> </head> <body> <table > <thead > <tr > <thcolspan="2">鼠标点击表格项就可以编辑</th> </tr> </thead> <tbody > <tr> <th>学号</th> <th>姓名</th> </tr> <tr> <td>0001</td> <td>张三</td> </tr> <tr> <td>0002</td> <td>李四</td> </tr> <tr> <td>0003</td> <td>王五</td> </tr> <tr> <td>0004</td> <td>赵六</td> </tr> </tbody> </table> </body> </html>
CSS代码为：
body { } table{/*标签选择器*/ border:1px solid black; border-collapse:collapse ;/*使边框之间没有空隙*/ 400px; } table td{ border:1px solid black; 50%; } table th{ border:1px solid black; 50%; } tbody th{ background-color :#A3BAE9; }
JS文件：
//首先需要通过JS来解决内容部分奇偶行的背景色不同 //$(document).ready(function () { //}); $(function(){ //找到表格内容中除了第一个tr外所有的奇数行 $("tbody tr:even").css("background-color","#ECE9D8"); //需要找到所有的学号单元格 var numTd=$("tbody td:even"); //给这些单元格注册鼠标点击事件 //numTd.click(function(){ // //创建一个文本框 // var inputObj = $("<input type='text'>"); // //去掉文本框的边框 // inputObj.css("border-width","0"); // //设置文本框汇总给的文字字体大小是16px； // inputObj.css("font-size", "16px"); // //找到当前鼠标点击的td,this 对应的就是响应click的那个td // var tdObj = $(this); // //使文本框的宽度和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); //另外一种精简的写法 numTd.click(function () { //找到当前鼠标低级的td，this对应的就是这个td var tdObj = $(this); if (tdObj.child("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")) .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) { } }); }); });
知识点小结：
1、$(function(){})是$(document).ready(function(){})的简化写法
2、$("tbodytr")可以返回tbody中的所有tr节点
3、$("tbodytr:even")可以返回tbody中所有索引值是偶数的tr节点。
4、CSS方法可以用于设定或获取节点的CSS属性。
5、JQuery的对象包含着选择器对应的DOM节点，以数组形式保存。
6、get方法可以获得JQuery对象中包含的某个DOM节点。
7、$()方法的参数是一个DOM对象时，这个方法相当于把DOM对象转换成JQuery对象。
8、children方法可以获得某个节点的子节点，可以指定参数来限制子节点的内容
9、appendTo方法可以将一个节点追加到另一个节点的所有子节点的后面。
10、trigger方法可以出发某个JS的事件发生。
总结：
学到的知识，必须要用一下，纸上得来终觉浅（视频也不行），绝知此事要躬行！
