jQuery做出可编辑表格（附代码）-js教程-PHP中文网

首页

web前端

js教程

jQuery做出可编辑表格（附代码）

php中世界最好的语言

Apr 25, 2018 am 10:20 AM

jquery代码表格

这次给大家带来jQuery做出可编辑表格（附代码），jQuery做出可编辑表格的注意事项有哪些，下面就是实战案例，一起来看一下。

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="WebForm1.aspx.cs" Inherits="WebApplication1.WebForm1" %> 
<!DOCTYPE html 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head runat="server"> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> 
<title>jq2—可以编辑的表格</title> 
<link href="css/editTable.css" rel="stylesheet" /> 
<script type="text/javascript" src="js/jquery.js"></script> 
<script type="text/javascript" src="js/editTable.js"></script> 
<%--<script type="text/javascript" src="js/jquery-1.9.1.js"></script>--%> 
</head> 
<body> 
<form id="form1" runat="server"> 
<p> 
<table> 
<thead> 
<tr> 
<th colspan="2">鼠标点击表格项就可以编辑</th> 
</tr> 
</thead> 
<tbody> 
<tr> 
<th>学号</th> 
<th>姓名</th> 
</tr> 
<tr> 
<td>000001</td> 
<td>张三</td> 
</tr> 
<tr> 
<td>000002</td> 
<td>李四</td> 
</tr> 
<tr> 
<td>000003</td> 
<td>王五</td> 
</tr> 
<tr> 
<td>000004</td> 
<td>赵六</td> 
</tr> 
</tbody> 
</table> 
</p> 
</form> 
</body> 
</html>

css代码：

body { 
} 
table { 
border:1px solid #000000; 
border-collapse:collapse;/*单元格边框合并*/ 
width:400px; 
} 
table td { 
border:1px solid #000000; 
width:50%; 
} 
table th { 
border:1px solid #000000; 
width:50%; 
} 
tbody th { 
background-color:#426fae; 
}

jquery代码

$(function () { 
//找到表格中除了第一个tr以外的所有偶数行 
//使用even为了通过tbody tr返回所有tr元素 
$("tbody tr:even").css("background-color", "#ece9d8"); 
//找到所有的学号单元格 
var numId = $("tbody td:even"); 
//给单元格注册鼠标点击事件 
numId.click(function () { 
//找到对应当前鼠标点击的td，this对应的就是响应了click的那个td 
var tdObj = $(this); 
//判断td中是否有文本框 
if (tdObj.children("input").length>0) { 
return false; 
} 
//获取表格中的内容 
var text = tdObj.html(); 
//清空td中的内容 
tdObj.html(""); 
//创建文本框 
//去掉文本框的边框 
//设置文本框中字体与表格中的文字大小相同。 
//设置文本框的背景颜色与表格的背景颜色一样 
//是文本框的宽度和td的宽度相同 
//并将td中值放入文本框中 
//将文本框插入到td中 
var inputObj = $("<input type=&#39;text&#39;>").css("border-width", "0").css("font-size", tdObj.css("font-size")).css("background-color", tdObj.css("background-color")).width(tdObj.width()).val(text).appendTo(tdObj); 
//文本框插入后先获得焦点、后选中 
inputObj.trigger("focus").trigger("select") 
//文本框插入后不能被触发单击事件 
inputObj.click(function () { 
return false; 
}); 
//处理文本框上回车和esc按键的操作 
inputObj.keyup(function (event) { 
//获取当前按下键盘的键值 
var keycode = event.which; 
//处理回车的情况 
if (keycode==13) { 
//获取当前文本框中的内容 
var inputtext = $(this).val(); 
//将td中的内容修改为文本框的内容 
tdObj.html(inputtext); 
} 
//处理esc的内容 
if (keycode==27) { 
//将td中的内容还原成原来的内容 
tdObj.html(text); 
} 
}); 
}); 
});

总结：通过这一实例的学习能获得的知识点：
一、html方面
1.table中可以包含thead和tbody
2.表头的内容中可以放th中
3.table{}这种写法称作标签选择器，可以对整个table产生影响。
4.table td{}这种写法表示table中包含的所有td。
二、jquery方面
$()的括号中可以放4种不同的参数
1.参数直接放function,表示页面加载完毕：例如上述例子中jquery代码中的第1行$(function(){})
2.参数可以是css类选择器，并被包装成一个jquery对象。例如：上述例子中jquery代码的第4行$(“tbody tr:even”)
3.参数如果是html文本，可以创建dom节点，并包装成jquery对象。例如：上述例子中jquery代码的第27行$("")
4.参数可以是一个dom对象，这个方法相当于吧dom对象装换成jquery对象。上述例子中jquery代码的第11行var tdObj = $(this)
本例子中的jquery对象
1.jquery对象后面加css属性，可以设置节点的css属性。例如上述例子中jquery代码中的第4行$("tbody tr:even").css("background-color", "#ece9d8");
2.jquery对象内容中包含了选择器对应的dom节点，以数组保存。
3.jquery对象后面加html方法可以设置或获取节点的html内容。例如上述例子中jquery代码中的第17行var text = tdObj.html()
4.jquery对象后面加val方法，可以获取或设置节点的value值。例如上述例子中jquery代码中第41行var inputtext = $(this).val()
5.jquery对象后面加width方法,可以设置或获取某个节点的宽度。例如上述例子中jquery代码中第27行tdObj.width()
6.jquery对象后面加apppendTo方法可以将一个节点追加到另一个节点所有子节点后面。例如上述例子中jquery代码中第27行appendTo(tdObj)
7.jquery对象后面加trigger方法可以出发某个js事件发生。例如上述例子中jquery代码中第29行inputObj.trigger("focus").trigger("select")
8.jquery对象后面加children方法可以获得某个节点的子节点，可以制定参数来限制子节点的内容。例如上述例子中jquery代码中第13行tdObj.children("input").length
9.如果选择器返回的jquery对象中包含多个dom节点，在这个对象上注册类似click事件，所有dom节点都会用于此事件。例如上述例子中jquery代码中第9行numId.click；

相信看了本文案例你已经掌握了方法，更多精彩请关注php中文网其它相关文章！

JS实现JSON.stringify步骤详解

以上是jQuery做出可编辑表格（附代码）的详细内容。更多信息请关注PHP中文网其他相关文章！

声明

本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系admin@php.cn

Python vs. JavaScript：社区，图书馆和资源Apr 15, 2025 am 12:16 AM

Python和JavaScript在社区、库和资源方面的对比各有优劣。1)Python社区友好，适合初学者，但前端开发资源不如JavaScript丰富。2)Python在数据科学和机器学习库方面强大，JavaScript则在前端开发库和框架上更胜一筹。3)两者的学习资源都丰富，但Python适合从官方文档开始，JavaScript则以MDNWebDocs为佳。选择应基于项目需求和个人兴趣。

从C/C到JavaScript：所有工作方式Apr 14, 2025 am 12:05 AM

从C/C 转向JavaScript需要适应动态类型、垃圾回收和异步编程等特点。1）C/C 是静态类型语言，需手动管理内存，而JavaScript是动态类型，垃圾回收自动处理。2）C/C 需编译成机器码，JavaScript则为解释型语言。3）JavaScript引入闭包、原型链和Promise等概念，增强了灵活性和异步编程能力。

JavaScript引擎：比较实施Apr 13, 2025 am 12:05 AM

不同JavaScript引擎在解析和执行JavaScript代码时，效果会有所不同，因为每个引擎的实现原理和优化策略各有差异。1.词法分析：将源码转换为词法单元。2.语法分析：生成抽象语法树。3.优化和编译：通过JIT编译器生成机器码。4.执行：运行机器码。V8引擎通过即时编译和隐藏类优化，SpiderMonkey使用类型推断系统，导致在相同代码上的性能表现不同。

超越浏览器：现实世界中的JavaScriptApr 12, 2025 am 12:06 AM

JavaScript在现实世界中的应用包括服务器端编程、移动应用开发和物联网控制：1.通过Node.js实现服务器端编程，适用于高并发请求处理。2.通过ReactNative进行移动应用开发，支持跨平台部署。3.通过Johnny-Five库用于物联网设备控制，适用于硬件交互。

使用Next.js（后端集成）构建多租户SaaS应用程序Apr 11, 2025 am 08:23 AM

我使用您的日常技术工具构建了功能性的多租户SaaS应用程序（一个Edtech应用程序），您可以做同样的事情。首先，什么是多租户SaaS应用程序？多租户SaaS应用程序可让您从唱歌中为多个客户提供服务

如何使用Next.js（前端集成）构建多租户SaaS应用程序Apr 11, 2025 am 08:22 AM

本文展示了与许可证确保的后端的前端集成，并使用Next.js构建功能性Edtech SaaS应用程序。前端获取用户权限以控制UI的可见性并确保API要求遵守角色库

JavaScript：探索网络语言的多功能性Apr 11, 2025 am 12:01 AM

JavaScript是现代Web开发的核心语言，因其多样性和灵活性而广泛应用。1)前端开发：通过DOM操作和现代框架（如React、Vue.js、Angular）构建动态网页和单页面应用。2)服务器端开发：Node.js利用非阻塞I/O模型处理高并发和实时应用。3)移动和桌面应用开发：通过ReactNative和Electron实现跨平台开发，提高开发效率。