利用jQuery实现可以编辑的表格
源码:
前台代码:
<%@PageLanguage="C#"AutoEventWireup="true"CodeBehind="WebForm1.aspx.cs"Inherits="WebApplication1.WebForm1"%> <!DOCTYPEhtml <htmlxmlns="http://www.w3.org/1999/xhtml"> <headrunat="server"> <metahttp-equiv="Content-Type"content="text/html;charset=utf-8"/> <title>jq2—可以编辑的表格</title> <linkhref="css/editTable.css"rel="stylesheet"/> <scripttype="text/javascript"src="js/jquery.js"></script> <scripttype="text/javascript"src="js/editTable.js"></script> <%--<scripttype="text/javascript"src="js/jquery-1.9.1.js"></script>--%> </head> <body> <formid="form1"runat="server"> <div> <table> <thead> <tr> <thcolspan="2">鼠标点击表格项就可以编辑</th> </tr> </thead> <tbody> <tr> <th>学号</th> <th>姓名</th> </tr> <tr> <td>000001</td> <td>张三</td> </tr> <tr> <td>000002</td> <td>李四</td> </tr> <tr> <td>000003</td> <td>王五</td> </tr> <tr> <td>000004</td> <td>赵六</td> </tr> </tbody> </table> </div> </form> </body> </html>
css代码:
body{ } table{ border:1pxsolid#000000; border-collapse:collapse;/*单元格边框合并*/ width:400px; } tabletd{ border:1pxsolid#000000; width:50%; } tableth{ border:1pxsolid#000000; width:50%; } tbodyth{ background-color:#426fae; }
jquery代码
$(function(){ //找到表格中除了第一个tr以外的所有偶数行 //使用even为了通过tbodytr返回所有tr元素 $("tbodytr:even").css("background-color","#ece9d8"); //找到所有的学号单元格 varnumId=$("tbodytd:even"); //给单元格注册鼠标点击事件 numId.click(function(){ //找到对应当前鼠标点击的td,this对应的就是响应了click的那个td vartdObj=$(this); //判断td中是否有文本框 if(tdObj.children("input").length>0){ returnfalse; } //获取表格中的内容 vartext=tdObj.html(); //清空td中的内容 tdObj.html(""); //创建文本框 //去掉文本框的边框 //设置文本框中字体与表格中的文字大小相同。 //设置文本框的背景颜色与表格的背景颜色一样 //是文本框的宽度和td的宽度相同 //并将td中值放入文本框中 //将文本框插入到td中 varinputObj=$("<inputtype='text'>").css("border-width","0").css("font-size",tdObj.css("font-size")).css("background-color",tdObj.css("background-color")).width(tdObj.width()).val(text).appendTo(tdObj); //文本框插入后先获得焦点、后选中 inputObj.trigger("focus").trigger("select") //文本框插入后不能被触发单击事件 inputObj.click(function(){ returnfalse; }); //处理文本框上回车和esc按键的操作 inputObj.keyup(function(event){ //获取当前按下键盘的键值 varkeycode=event.which; //处理回车的情况 if(keycode==13){ //获取当前文本框中的内容 varinputtext=$(this).val(); //将td中的内容修改为文本框的内容 tdObj.html(inputtext); } //处理esc的内容 if(keycode==27){ //将td中的内容还原成原来的内容 tdObj.html(text); } }); }); });
总结:通过这一实例的学习能获得的知识点:
一、html方面
1.table中可以包含thead和tbody
2.表头的内容中可以放th中
3.table{}这种写法称作标签选择器,可以对整个table产生影响。
4.tabletd{}这种写法表示table中包含的所有td。
二、jquery方面
$()的括号中可以放4种不同的参数
1.参数直接放function,表示页面加载完毕:例如上述例子中jquery代码中的第1行$(function(){})
2.参数可以是css类选择器,并被包装成一个jquery对象。例如:上述例子中jquery代码的第4行$(“tbodytr:even”)
3.参数如果是html文本,可以创建dom节点,并包装成jquery对象。例如:上述例子中jquery代码的第27行$("<inputtype='text'>")
4.参数可以是一个dom对象,这个方法相当于吧dom对象装换成jquery对象。上述例子中jquery代码的第11行vartdObj=$(this)
本例子中的jquery对象
1.jquery对象后面加css属性,可以设置节点的css属性。例如上述例子中jquery代码中的第4行$("tbodytr:even").css("background-color","#ece9d8");
2.jquery对象内容中包含了选择器对应的dom节点,以数组保存。
3.jquery对象后面加html方法可以设置或获取节点的html内容。例如上述例子中jquery代码中的第17行vartext=tdObj.html()
4.jquery对象后面加val方法,可以获取或设置节点的value值。例如上述例子中jquery代码中第41行varinputtext=$(this).val()
5.jquery对象后面加width方法,可以设置或获取某个节点的宽度。例如上述例子中jquery代码中第27行tdObj.width()
6.jquery对象后面加apppendTo方法可以将一个节点追加到另一个节点所有子节点后面。例如上述例子中jquery代码中第27行appendTo(tdObj)
7.jquery对象后面加trigger方法可以出发某个js事件发生。例如上述例子中jquery代码中第29行inputObj.trigger("focus").trigger("select")
8.jquery对象后面加children方法可以获得某个节点的子节点,可以制定参数来限制子节点的内容。例如上述例子中jquery代码中第13行tdObj.children("input").length
9.如果选择器返回的jquery对象中包含多个dom节点,在这个对象上注册类似click事件,所有dom节点都会用于此事件。例如上述例子中jquery代码中第9行numId.click;