宝哥软件园

jquery学习笔记二实现可编辑表

编辑:宝哥软件园 来源:互联网 时间:2021-10-23

实现可编辑表单演示:示例图:

代码:复制代码如下:DOCTYPE html PUBLIC '-//W3C//DTD XHTML 1.0 Transitional//EN ' ' http://www . w3 . org/TR/XHTML 1/DTD/XHTML L1-Transitional . DTD ' html xmlns=' http://www . w3 . org/1999/XHTML ' head runat=' server ' title/title script type=' text/Jscript ' src=' http 3360 jquery-1 . 4 . 2 . min . js '/'css('背景色',' # ece9d8 ')。//将tbody中的偶数td设置为num TD var num TD=$ ('tbody TD :偶数');//注册鼠标点击事件numTd.click(function() {//取被点击元素的jquery对象var tdObj=$(this);//如果被点击的元素包含输入控件,则在(tdobj . children(' input '). length 0){ return false;}//取td内容附加值为text var text=tdObj.html();//清除td中的tdObj.html(');//创建一个文本框,去掉文本框的边框,将文本框中文本的字体大小设置为16px //使文本框的宽度与td相同,并设置文本框的背景颜色。您需要将当前td中的内容放入文本框中。//将文本框插入td。var input obj=$ ('input type=' text ' ')。CSS('边框宽度',' 0 ')。CSS('字号',' 16px ')。宽度(tdObj.width())。css('背景色',tdObj.css('背景色')。val(文本)。appendo(tdObj);//在触发select事件input tobj . trigger(' focus ')之前,将触发器设置为触发焦点事件。触发器(' select ');//在插入文本框后被选中。单击(function(){ return false;});//注册keyup事件input tobj . key up(function(event){//获取键值var keycode=event .当前按下的是哪个键盘;//处理回车if (keycode==13) {//获取当前文本框var inputtext=$(this)的内容。val();//将td的内容修改为文本框中的tdobj . html(input text);}//处理esc if (keycode==27) {//将td中的内容还原为text tdobj . html(text);} });});});/script style type=' text/CSS ' table { border : 1px纯黑;边界崩溃:崩溃;宽度: 400 px;}表格td { border: 1px纯黑;宽度:50%;} table th { border: 1px纯黑;宽度:50%;} t body th { background-color : # A3BAE 9;}/style/head Body form id=' form 1 ' runat=' server ' table and Tr th colspan=' 2 '您可以编辑/th/Tr/the and t Body Tr th student id/th name/th/Tr TD 000001/TD TD张三/TD/Tr TD 00002/TD TD TD李思/TD/Tr TD 00003/TD TD TD TD王武/TD/Tr Tr TD 00001/TD TD TD TD TD刘钊/td /tr /tbody /table /form$(function() {})是$(document)的缩写。ready(function() {})。2.“:”在$ ('tbodytd:even ')中表示过滤,even是偶数函数,过滤条件可以在帮助文档的选择器中找到。这句话的意思是,即使是tbody中的td也被返回,结果也是一个集合。3.$(this)将在事件中返回此控件的jquery对象。4.children('input ')的意思是取一个jquery对象,包含所有子元素,包括input,结果是一个集合。5.css('边框宽度',' 0 ')表示设置css属性的值。6.触发器(“焦点”)。Trigger ('select ')表示设置事件首先触发焦点,然后触发select。7 . key up(function(event){ var key code=event . what;})表示键盘事件已注册,参数事件的that属性存储键盘信息。

更多资讯
游戏推荐
更多+