JQuery实现表格点击就可以修改

最新推荐文章于 2022-10-27 08:00:00 发布

hugit

最新推荐文章于 2022-10-27 08:00:00 发布

阅读量5.4k

点赞数 1

分类专栏： jquery

jquery 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

我们看到有些网站表格内容点击就可以直接修改，修改完后，点击回车键就能将修改内容显示成表格内容，最经典的例子：QQ签名，不点击时候看着是一段文字，点击后就能输入，点击编辑个性签名就能出现能够输入的文本框。所以在页面中也做一个这种效果的表格

思想：给表格td注册一个onclick事件，当点击时候记住文本内容，并且将td表格编程一个输入的文本框，并且文本框Value的值改成以前td内容，对文本框修改后，点击回车键同时记住文本框内容，让后将文本框内容再写入到td标签里边

HTML页面：
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01Transitional//EN">
<html>
<head>
<title>JQuery示例：可以编辑的表格</title>

<link type="text/css" rel="stylesheet"href="css/edit.css"/>
<script type="text/javascript"src="js/jquery.js"></script>
<script type="text/javascript"src="js/jqueryedit.js"></script>
</head>

<body>
<table>
<tbody>
<tr>
<td>编辑个性签名</td>
<td>12345645</td>
</tr>
</tbody>
</table>
</body>
</html>

JS文件内容：

//在页面装载时，让所有的td都拥有点击事件
$(document).ready(function(){
//找到所有td节点
var tds =$("td");
//给所有的td节点增加点击事件
tds.click(tdclick);
});

function tdclick(){
varclickfunction = this;
//0,获取当前的td节点
var td =$(this);
//1,取出当前td中的文本内容保存起来
var text =$(this).text();
//2，清空td里边内同
td.html("");
//3,建立一个文本框，也就是建一个input节点
var input =$("<input>");
//4,设置文本框中值是保存起来的文本内容
input.attr("value",text);
//4.5让文本框可以相应键盘按下的事件
input.keyup(function(event){
//记牌器当前用户按下的键值
var myEvent= event || window.event;//获取不同浏览器中的event对象
var kcode =myEvent.keyCode;
//判断是否是回车键按下
if(kcode ==13){
varinputnode = $(this);
//获取当前文本框的内容
var inputext= inputnode.val();
//清空td里边的内容,然后将内容填充到里边
var tdNode =inputnode.parent();
tdNode.html(inputext);
//让td重新拥有点击事件
tdNode.click(tdclick);
}
});
//5，把文本框加入到td里边去
td.append(input);
//5.5让文本框里边的文章被高亮选中
//需要将jquery的对象转换成dom对象
var inputdom= input.get(0);
inputdom.select();

//6,需要清楚td上的点击事件
td.unbind("click");
}