|
锁定老帖子 主题：JQuery实现可编辑的表格
精华帖 (0) :: 良好帖 (2) :: 新手帖 (0) :: 隐藏帖 (0)
|
|
|---|---|
| 作者 | 正文 |
|
发表时间：2011-04-04
最后修改：2011-04-07
edit.html: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>可以编辑的表格</title>
<!-- <link type ="text/css" rel="stylesheet" href="css/edit.css" />-->
<script type="text/javascript" src="jslib/jquery1.5.js"></script>
<script type="text/javascript" src="jslib/jqueryedit.js"></script>
</head>
<body>
<table border="1px">
<tr>
<td>编辑</td>
<td>表格</td>
</tr>
</table>
</body>
</html>
jqueryedit.js: $(document).ready(function(){
var tds=$("td");
tds.click(tdclick);
});
function tdclick(){
var td=$(this);
//1,取出当前td中的文本内容保存起来
var text=td.text();
//2,清空td里面的内容
td.html(""); //也可以用td.empty();
//3，建立一个文本框，也就是input的元素节点
var input=$("<input>");
//4，设置文本框的值是保存起来的文本内容
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();
var tdNode=inputnode.parent();
tdNode.html(inputtext);
tdNode.click(tdclick);
}
});
//5，将文本框加入到td中
td.append(input);
//6,清除点击事件
td.unbind("click");
}
声明：ITeye文章版权属于作者，受法律保护。没有作者书面许可不得转载。
推荐链接
|
| 返回顶楼 | |
|
发表时间：2011-04-04
然后呢？ 编辑完了，再返回td状态，去除<input> ？
|
| 返回顶楼 | |
|
发表时间：2011-04-04
当修改完成，按Enter键以后就返回到td状态啊
|
| 返回顶楼 | |
|
发表时间：2011-04-05
wustrive_2008 写道 当修改完成，按Enter键以后就返回到td状态啊
 嘿嘿 我上次没仔细看完
|
| 返回顶楼 | |
|
发表时间：2011-04-07
tdNode.click(tdclick)与原click事件及unbind为什么不会冲突？
|
| 返回顶楼 | |
|
发表时间：2011-04-07
input.bind({
keyup: function(event){ var myEvent =event||window.event; var kcode=myEvent.keyCode; if(kcode==13){ var inputnode=$(this); var inputtext=inputnode.val(); var tdNode=inputnode.parent(); tdNode.html(inputtext); tdNode.click(tdclick); } }, blur: function(){ var inputnode=$(this); var inputtext=inputnode.val(); var tdNode=inputnode.parent(); tdNode.html(inputtext); tdNode.click(tdclick); } }); |
| 返回顶楼 | |
|
发表时间：2011-04-07
有个jqgrid的插件可以直接用，看下来是目前jq下最好的grid了，你要的功能基本都有
|
| 返回顶楼 | |
|
发表时间：2011-04-07
把文件打包传个附件撒~~~~~
|
| 返回顶楼 | |
|
发表时间：2011-04-07
这代码我似曾相识
|
| 返回顶楼 | |
|
发表时间：2011-04-08
有个TableEditor Plugin，去看看吧。
|
| 返回顶楼 | |
