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): 設置所有匹配元素的文本內容
效果圖為：