您的位置：首页 > Web前端 > JQuery

jQuery实现可编辑表格

2016-04-15 11:17 603 查看

在很多的网页中，这个可编辑表格在许多地方都是非常有用，配合上AJAX技术能够实现很好的用户体验，下面我

们就jQuery来说明一下可编辑表格的实现步骤

首先是HTML代码，非常简单

[html] view plain copy

print ?

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

<html>

<head>

<title>可以编辑的表格</title>

<script type="text/javascript" src="/Ajax/js/jquery-1.7.2.js"></script>

<script type="text/javascript" src="/Ajax/js/edit.js"></script>

<link rel="stylesheet" href="/Ajax/css/edit.css" type="text/css"></link>

</head>

<body>

<table border="1px">

<tr>

<td>123123</td> <td>456456</td>

</tr>

</table>

</body>

</html>

然后是js代码

[javascript] view plain copy

print ?

$(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.提取文本框里面的值

}

注释写的挺清楚了，这样就实现了可编辑的表格，用户按下回车或者点击一下别的地方就能实现数据的保存

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航