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): 设置所有匹配元素的文本内容
效果图为：