您的位置:首页 > Web前端 > JQuery

使table中的td可编辑

2013-10-30 21:53 761 查看
//在页面加载时候,就使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");

}
内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
标签:  jquery js json function