jQuery实现可编辑表格-白红宇

jQuery实现可编辑表格

阅读量：5285 次

发布时间：2019-06-14

本文共 1438 字，大约阅读时间需要 4 分钟。

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

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

首先是HTML代码，非常简单

[html]

<!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]

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

}

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

转载于:https://www.cnblogs.com/lanye/p/5394672.html

你可能感兴趣的文章

wpf的VisualStateManager

查看>>

leetcode 383. 赎金信(Ransom Note)

查看>>

Mysql联合查询UNION和UNION ALL的使用介绍

查看>>

node js学习（二）——REPL（交互式解释器）

Android Audio Focus的应用(requestAudioFocus)

查看>>

1django 视图与网址

查看>>

实现如下语法的功能：var a = (5).plus(3).minus(6); //2

SharePoint回环检查(Loopback Check)相关问题

查看>>

戏说 .NET GDI+系列学习教程(三、Graphics类的应用_验证码)

查看>>

python_basic

查看>>

SQL Server数据库——数据库的数据导出与数据导入

WIN10更新后，应用报“不能在此路径中使用此配置节。如果在父级别上锁定了该节,便会出现这种情况”...

查看>>