剛剛看視頻之後動手做的，實現比較簡單，具體代碼如下：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>無標題文檔</title>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("tbody > tr:even").addClass("dan"); /*奇數行變色*/
$("tbody > tr > td").dblclick(function(){
var inval = $(this).html(); //獲取當前點擊td內容
var infd = $(this).attr("fd"); //獲取當前點擊td中的fd自定義屬性值
var inid = $(this).parents().attr("id"); //獲取當前點擊td父類tr的id
//雙擊以後當前td變成輸入框，id定義爲edit"+infd+inid+"爲了避免重複，value爲原內容
$(this).html("<input id='edit"+infd+inid+"'value='"+inval+"'>");
//鼠標焦點失去後執行
$("#edit"+infd+inid).focus().live("blur",function(){
var editval = $(this).val(); //獲取更改內容
$(this).parents("td").html(editval); //將點擊的td中原內容改爲輸入的新內容
});
});
});
</script>
<style type="text/css">
table{
width:400px;
border:0;
border-collapse:collapse; /*邊框會合併爲一個單一的邊框*/
margin:auto;
}
th{
font:bold 18px "微軟雅黑";
text-align:center;
padding:4px;
border-bottom:1px solid #000;
}
td{
font:normal 18px "微軟雅黑";
text-align:center;
padding:2px;
border-bottom:1px solid #000;
}
.dan{
background:#F33;
color:#FFF;
}
</style>
</head>
<body>
<table>
<thead>
<tr>
<th>時間</th><th>地點</th><th>人物</th>
</tr>
</thead>
<tbody>
<tr id="1">
<td fd="d">5月01日</td><td fd="a">北京</td><td fd="n">小張</td>
</tr>
<tr id="2">
<td fd="d">4月03日</td><td fd="a">上海</td><td fd="n">王洋</td>
</tr>
<tr id="3">
<td fd="d">7月16日</td><td fd="a">天津</td><td fd="n">婉玉</td>
</tr>
<tr id="4">
<td fd="d">3月22日</td><td fd="a">濟南</td><td fd="n">張協</td>
</tr>
<tr id="5">
<td fd="d">6月08日</td><td fd="a">杭州</td><td fd="n">劉順</td>
</tr>
</tbody>
</table>
</body>
</html>