简单的模拟jQuery easyUI的行编辑
核心思想:
主要是为td增加点击事件,如果点击了,把原来的纯HTML文本,变成可编辑的input表格,并且需要记录原始文本的值,当鼠标失去焦点的时候,把input标签里面的值,替换文td里面的文本的值
核心代码如下:
<script type="text/javascript">
$(function () {
//找到所有名字的单元格
var name = $("tbody td:even");
//给这些单元格注册鼠标点击事件
name.click(function () {
//找到当前鼠标单击的td
var tdObj = $(this);
//保存原来的文本
var oldText = $(this).text();
//创建一个文本框
var inputObj = $("<input type='text' value='" + oldText + "'/>");
//去掉文本框的边框
inputObj.css("border-width", 0);
inputObj.click(function () {
return false;
});
//使文本框的宽度和td的宽度相同
inputObj.width(tdObj.width());
inputObj.height(tdObj.height());
//去掉文本框的外边距
inputObj.css("margin", 0);
inputObj.css("padding", 0);
inputObj.css("text-align", "center");
inputObj.css("font-size", "16px");
inputObj.css("background-color", tdObj.css("background-color"));
//把文本框放到td中
tdObj.html(inputObj);
//文本框失去焦点的时候变为文本
inputObj.blur(function () {
var newText = $(this).val();
tdObj.html(newText);
});
//全选
inputObj.trigger("focus").trigger("select");
});
});
</script>
