1、 思路首先实现隔行换色的效果当点击想要修改的列时，创建文本框当点击 enter时提交数据，当点击esc返回的键时，取消输入的内容
2．代码解析 Html代码 ： <body> <div align="center"> <h1> 显示员工界面 </h1> <table> <thead> <tr> <td><input type="checkbox" name="chk"> </td> <td>序号 </td> <td>姓名</td> <td>性别</td> <td>年龄</td> <td>出生日期</td> <td>薪资</td> <td>部门</td> </tr> </thead> <tbody> <tr> <td><input type="checkbox" name="chk"> </td> <td >1</td> <td>老王</td> <td>女</td> <td>23</td> <td>5435343</td> <td>10000</td> <td>河软</td> </tr> <tr> <td><input type="checkbox" name="chk"> </td> <td>1</td> <td>老王</td> <td>女</td> <td>23</td> <td>5435343</td> <td>10000</td> <td>河软</td> </tr> <tr> <td><input type="checkbox" name="chk"> </td> <td>1</td> <td>老王</td> <td>女</td> <td>23</td> <td>5435343</td> <td>10000</td> <td>河软</td> </tr> </tbody> </table> </div> </body> Js代码为: $（document）.ready（
function（）{ //实现隔行变色的效果 //首先获取tbody中的所有的tr，然后采用：even选择出奇数行的所有的特点，但是返回的是偶数行 $（"tbody>tr:even"）.css（"background-color","pink"）; ///功能一样，是偶数行，实际是奇数行 $（"tbody>tr:odd"）.css（"background-color","#BEBEBE"）; //当点击tbody中的td时，能够把td中的内容替换成一个text框，进行修改 //点击enter 能够提交数据 点击esc键撤销修改 //获取所有的tr,并注册事件,因为在遍历的时候序号不可编辑，所以序号这一列不能编辑 $（"tbody tr"）.each（
function（index,dom）{ //通过dom得到所有的tr，判断tr中的td如果是>2的才可以编辑 $（dom）.children（"td:gt（1）"）.click（
function（）{ //获取td的jQuery对象
var $td = $（
this）;//注意得到td的jQuery的对象的时候用的是this,也就是点击哪个获取哪个，如果用的是dom,得到的是整行。 //得到文本框内容
var tdText = $td.text（）; //text 取得所有匹配元素的内容。 //判断如果已经创建了input，就不在创建了，如果没有创建，在创建,是通过判断孩子节点
if（$td.children（"input"）.length>0）{
return false; } //清空td中的文本 $td.html（""）; //设置每一个匹配元素的html内容 //创建可编辑的input
var $input = $（"<input type="text"/>"）; $input.css（"background-color",$td.css（"background-color"））;//设置input的框元素和td中的颜色相同 $input.css（"width",$td.width（））;//宽度和td的宽度相同 $input.css（"border-width",0）;//文本框的边框为0 //在得到文本框的同时得到文本框以前的内容 $input.val（tdText）; //获得第一个匹配元素的当前值。 //把创建的input放到td中 $td.append（$input）; //当触发td的键盘事件的时候，如果点enter键，保存，如果点esc，取消输入的内容 $td.keyup（
function（event）{ //获取键盘按下的事件
var key = event.which; //alert（key）;
if （key == 13） { $td.html（$input.val（））;//得到文本框的值并放到td中 }
else if（key==27）{ $td.html（tdText）; } }）; }）; }）; }）;
3.总结在这里我大概总结一下text（）,val（）,html（）的区别，因为在这个例子之间，反复用到了这几个属性 html（）:取得第一个匹配元素的html内容。这个函数不能用于XML文档。但可以用于XHTML文档。 html（val）:设置每一个匹配元素的html内容val（）:获得第一个匹配元素的当前值。val（val）: 设置每一个匹配元素的值。text（）:取得所有匹配元素的内容。text（val）: 设置所有匹配元素的文本内容 效果图为：
易网时代-编程资源站