1.? 首先,看一下代码.
1//需要首先通过Javascript来解决内容部分奇偶行的背景色不同 $(function(){ //找到表格的内容区域中所有的偶数行 $("tbody tr:even").css("background-color","#E3E9D8"); //我们需要找到所有学号的单元格 var numTd=$("tbody td:even"); //给这些单元格注册鼠标点击事件 numTd.click(function(){ //找到当前鼠标点击的td,this对应的就是响应了click的那个td var 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=$("<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.get(0).select(); inputObj.trigger("focus").trigger("select"); //处理文本框上回车和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中的内容还原成text tdObj.html(text); } }); }); });
?2. 代码总结
???? (1)
<table> <thead> <tr> <th colspan="2">鼠标点击表格项就可以编辑</th> </tr> </thead> <tbody> <tr> <th>学号</th> <th>姓名</th> </tr> </tbody> </table>??
?? table中可以包含thead和tbody
?? 表头的内容可以放在thead和tbdoy的th标签中.
?
???? (2)
?
table{ border:1px solid black; /*修正单元格之间的边框不能合并*/ border-collapse:collapse; width:400px; }
??? 可以通过border-collapse:collapse这种方式 来使表格中的单元格的边框合并
??? (3) 当th上有背景色时,这个th属于的tr上定义的背景色会无效
??? (4) css()方法可以用于 设定获取 节点的css属性,参数名是css的属性名.
??? (5) jquery的对象内容包含着选择器对应的 DOM节点,以数组形式保存.
??? (6) get()方法可以获得jquery对象中包含的某一个dom节点
??? (7) $()方法的参数 是一个DOM对象时,这个方法相当于把DOM对象转换为jquery对象
??? (8) children() 方法可以获得某个节点的子节点,可以指定参数来限制子节点的内容.
??? (9) 如果选择器返回的jquery对象中包含多个DOM节点,在这个对象上注册类似click这样的事件时,
???????? 所有的DOM节点都会用于事件.
??? (10) html()方法可以 设置或获取 节点的html内容.
?
if(keycode==13){ //获取当前文本框中的内容 var inputtext=$(this).val(); //将td中的内容修改为文本框的内容 tdObj.html(inputtext); }?
?
var text=tdObj.html();//获取节点的html内容 //清空td中的内容 tdObj.html("");
?
??? (11) val()方法可以 设置或获取 节点的value值
??? (12) $()方法的参数 如果是一段正确的html文本,则可以创建一个DOM节点,并包装成jquery对象.
?
var inputObj=$("<input type='text'>")
??? (13) width方法可以 设置或获取 某个节点的宽度.
?
var inputObj=$("<input type='text'>").css("border-width","0") .css("font-size","16px") .width(tdObj.width())?
??? (14) appendTo方法可以将一个节点追加到另一个节点所有子节点的后面
??? (15) 阻止事件传递可以让当前节点的事件返回false
?
if(tdObj.children("input").length>0){ //当前td中有input,不执行click处理 return false; }
??? (16) safari浏览器 必须要先focus文本框 再 select选中文本内容。其他浏览器直接select就可以选中文本
??? (17) trigger()方法可以触发某个javascript的事件方法
?
//使文本框插入之后就被选中 //inputObj.get(0).select(); inputObj.trigger("focus").trigger("select");
?
?? (18) jquery中某个事件方法的参数 function上可以定义一个event的参数。jquery会屏蔽浏览器的event差异,
??????? 传给我们一个可以的event对象。
?? (19) jquery的event对象上有一个which属性可以获得键盘按键的值。
?? (20) keycode=13 回车键? keycode=27 ESC键
?