<table border="0" style="width:200px;margin:30px auto">
<tr><td>1</td><td>2</td><td><!-- <input type="button" value="編輯"> --><img src="edit.png" class="edit"></td></tr>
<tr><td>1</td><td>2</td><td><!-- <input type="button" value="編輯"> --><img src="edit.png" class="edit"></td></tr>
<tr><td>1</td><td>2</td><td><!-- <input type="button" value="編輯"> --><img src="edit.png" class="edit"></td></tr>
<tr><td>1</td><td>2</td><td><!-- <input type="button" value="編輯"> --><img src="edit.png" class="edit"></td></tr>
<tr><td>1</td><td>2</td><td><!-- <input type="button" value="編輯"> --><img src="edit.png" class="edit"></td></tr>
</table>
<script src="jquery-1.11.3.js"></script>
<script type="text/javascript">
$(function(){
$(".edit").click(function() {
//str = $(this).val()=="編輯"?"確定":"編輯";
//$(this).val(str); // 按鈕被點擊后，在“編輯”和“確定”之間切換
var str = $(this).attr("src")=="edit.png"?"phone.png":"edit.png";
$(this).attr("src",str);
$(this).parent().siblings("td").each(function() { // 獲取當前行的其他單元格
var obj_text = $(this).find("input:text"); // 判斷單元格下是否有文本框
if(!obj_text.length) // 如果沒有文本框，則添加文本框使之可以編輯
$(this).html("<input type='text' value='"+$(this).text()+"'>");
else // 如果已經存在文本框，則將其顯示為文本框修改的值
$(this).html(obj_text.val());
});
});
});
</script>
說明：1、在table的某個單元格點擊中，先取出該單元格的值，再將該值賦給一個input text，並將這個input text動態添加到這個單元格中，代碼可以寫成：
var tdvalue=$(this).val();
$(this).html("<input id='tempinput' type='text' value='"+tdvalue+"'/>");
2、當單元格失去焦點時，將文本框的值回填給單元格，代碼寫成：
$(this).html($("tempinput").val());
3、實際寫代碼時還要考慮臨時加入的文本框的寬度要與單元格一致等內容。
簡易效果圖：
