實現頁面動態修改信息。功能：在查詢結果下，點擊修改，需修改的地方從顯示狀態變為可編輯的狀態，輸入修改的值，通過ajax傳輸到后台進行更新，保存，顯示更新后的值。若點修修改后不想修改了，則點擊取消，返回不修改。下面介紹下實現的步驟：
1，動態遍歷出的數據后面添加操作按鈕，可以有刪除啊，修改啊，本人是照片文件名列表，所以還有預覽這一項。今天要實現的功能就是修改文件名。
2，遍歷項包含標簽<a onclick="change(this)" href="javascript:void(0);">修改</a>，點擊后觸發change方法.
3,
function change(obj){
/*
一：文件名變成文本框編輯
二：修改文件名變成兩個按鈕【保存，取消】
*/
//一
//獲取<a>標簽父親父親節點<td>的兄弟節點<td>
var p = $(obj).parent().parent().prev();
//獲取<td>標簽的屬性值
var title = p.text();
//替換<td>標簽
$(p).html("<input type='text' value='"+title+"'/>");
//二
//獲得<a>標簽所在的父親父親節點<td>
var o = $(obj).parent();
//獲取
var updateNameA = $(o).html();
$(o).html("<input type=\"button\" value=\"保存\" onclick=\"saveData(this,'"+title+"');\"/><input type=\"button\" value=\"取消\" onclick=\"cancleEdit(this,'"+title+"')\" //>");
};
4，cancleEdit()方法代碼----取消編輯
//取消編輯、恢復成原來
function cancleEdit(obj,data){
var p = $(obj).parent().parent().prev();
$(p).html(data);
var o = $(obj).parent();
$(o).html("<a onclick=\"change(this)\" href=\"javascript:void(0);\">修改文件名</a>");
}
5,saveData()方法代碼-----保存數據
function saveData(obj, data) {
//獲取修改后的值
var p = $(obj).parent().parent().prev().find("input").val();
var op = data;
var flag = 3;
//通過ajax處理
$.ajax({
url : "modNameAction",
type : "GET",
data : {
"p" : p,
"op" : op
},
dataType : "text",
success : function(data) {
//將返回的JSON字符串轉換成JSON對象
var b = eval("(" + data + ")");
var c = b.url;
//對結果進行處理
if (c == "success") {
cancleEdit(obj, p);
} else {
alert("對不起，已存在相同名字的文件！");
}
}
});
}
1，熟練利用jquery選擇器，以及熟練使用字符拼接。
2，.html（） 和.text（）方法的使用