JQuery_可编辑表格
HTML<table border="1px">
<tr>
<td>222</td>
<td>333</td>
<tr>
</table>
CSS
table,td{
border-collapse:collapse;/*让相邻边框合并*/
border:1px solid black;/*边框1像素*/
}
JS
//td被拥有一个点击
$(document).ready(function(){
//找到所有td节点
var tds = $("td");
//增加点击
tds.click(function(){
//保存当前的td节点
var td=$(this);
//保存td中的文本内容
var text = td.text();
//清空td中的内容
td.html();
//建立一个文本框
var input =$("input");
//设置文本框的值是保存起来的内容
input.attr("value",text);
//响应键盘事件
input.keyup(function(event){
//获取用户按下的键值
//解决不同游览器的差异
var myEvent = event || window.event;
var kcode = myEvent.keycode;
//判断是否是回车键按下
if(kcode==13){
var inputnode = ${this};
//保存当前文本的内容
var inputtext = inputnode.val();
//清空td的内容
var tdNode = inputnode.parent();
tdNode.html();
//保存内容到填充到td中
tdNode.html(inputtext);
//让td重新拥有点击事件
tdNode.click();
}
});
//将文本框加入到td中
td.append(input);//也可以用input.appendTo(td);
//清除td的点击事件
td.unbind("click");
})
})
function tdclick(){
//找到所有td节点
var tds = $("td");
//增加点击
tds.click(function(){
//保存当前的td节点
var td=$(this);
//保存td中的文本内容
var text = td.text();
//清空td中的内容
td.html();
//建立一个文本框
var input =$("input");
//设置文本框的值是保存起来的内容
input.attr("value",text);
//响应键盘事件
input.keyup(function(event){
//获取用户按下的键值
//解决不同游览器的差异
var myEvent = event || window.event;
var kcode = myEvent.keycode;
//判断是否是回车键按下
if(kcode==13){
var inputnode = ${this};
//保存当前文本的内容
var inputtext = inputnode.val();
//清空td的内容
var tdNode = inputnode.parent();
tdNode.html();
//保存内容到填充到td中
tdNode.html(inputtext);
//让td重新拥有点击事件
tdNode.click(tdclick);
}
});
//将文本框加入到td中
td.append(input);//也可以用input.appendTo(td);
//让文字框里面的文字被选中
//首先是把jquery对象转化成demo对象
var inputdom = input.get(0);
inputdom.select();
//清除td的点击事件
td.unbind("click");
}
页:
[1]