jQuery实现可编辑表格

最新推荐文章于 2022-07-19 16:38:43 发布

piperzero

最新推荐文章于 2022-07-19 16:38:43 发布

阅读量2.4k

点赞数

分类专栏：网站建设文章标签： jquery function input html border 浏览器

本文链接：https://blog.csdn.net/freejs/article/details/7698947

版权

网站建设专栏收录该内容

740 篇文章 1 订阅

订阅专栏

演示地址: http://www.corange.cn/demo/3833/index.html
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>可以编辑的表格</title>
<script type="text/javascript" src="../jquery.js"></script>
</head>

<body>
<table border="1px">
<tr>
<td>123123</td> <td>456456</td>
</tr>
</table>
</body>
</html>
<script>
$(function(){
//找到所有的td节点
$("td").click(tdclick);
});

function tdclick(){

var td = $(this);
//1.取出当前的文本内容并且保存起来
var text = td.text();
//2. 清除当前的td内容
td.html("");//也可以用empty()方法
//3.建立一个input标签
var input = $("<input>");
//4.设置文本框里面的值是改写后的内容
input.attr("value",text);
//4.5响应键盘事件，处理回车
input.keyup(function(event){
//1.判断是否回车按下
//结局不同浏览器获取时间的差异
var myEvent = event || window.event;
var key = myEvent.keyCode;
if(key == 13){
var inputNode = $(this);
//1.保存当前文本框的内容
var inputText = inputNode.val();
//2.清空td里面的内容
inputNode.parent().html(inputText);

td.click(tdclick);
}
});

input.blur(function(){
var inputNode = $(this);
var inputText = inputNode.val();
inputNode.parent().html(inputText);
td.click(tdclick);
});

//5.把文本框就加入到td里面去
td.append(input);
//6.需要清除td上面的点击事件
//6.5高亮数据

td.unbind("click");
//7.提取文本框里面的值
}
</script>

原文地址: http://www.corange.cn/archives/2012/05/3833.html

piperzero

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
1
评论
jQuery实现可编辑表格

演示地址:http://www.corange.cn/demo/3833/index.html 可以编辑的表格 123123 456456 $(function(){ //找到所有的td节点 $("td").click(tdclick); }); function tdclick(){ var td = $(this); //1.取出当前的文本内容并且保存起来 var t
复制链接

扫一扫

专栏目录