1. 程式人生 > >使table中的td可編輯

使table中的td可編輯

//在頁面載入時候,就使td節點具有click點選能力
$(document).ready(function() {
var tdNods = $(".tableBody td");
tdNods.click(tdClick);


});
// td的點選事件
function tdClick() {
// 將td的文字內容儲存
var td = $(this);
var trChildren = td.parent("tr").children();
removeAttr();
var trNods = $(".tableBody tr");
for ( var i = 0; i < trNods.length; i++) {


}
var tdText = td.text();
// 將td的內容清空
td.empty();
// 新建一個輸入框
var input = $("<input>");
// 將儲存的文字內容賦值給輸入框
/* input.attr("value",tdText); */
input.val(tdText);
input.width(td.width());
// 將輸入框新增到td中
td.append(input);
// 獲取當前td在當前行所有td所在位置
var tdLocation = td.parent("tr").find("td").index(td);
// 雙擊獲取基礎資料
input.dblclick(function() {


});
input.focus(function() {

$.post("calCommissionAction", obj, function(returnObject) {
// alert(returnObject);
var o = $.parseJSON(returnObject);
input.val(o[1]);
});
}
});
// 給輸入框註冊事件,當失去焦點時就可以將文字儲存起來
input.blur(function() {
// 將輸入框的文字儲存
var input = $(this);


var inputText = input.val();

// 將td的內容,即輸入框去掉,然後給td賦值
var td = input.parent("td");
td.html(inputText);



// 讓td重新擁有點選事件
td.click(tdClick);
totalSum();


});


input.keyup(function(event) {
// 當直接輸入產品資訊是自動查詢
});


// 將輸入框中的文字高亮選中
// 將jquery物件轉化為DOM物件
var inputDom = input.get(0);
inputDom.select();
// 將td的點選事件移除
td.unbind("click");
}