jQuery下table操作示例(附案例源码)

练习效果：(仅用于技术点练习)

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>Document</title><script src="https://code.jquery.com/jquery-3.4.0.min.js"></script><script>//删除function del(o) {$(o).parent().parent().remove();}//修改function update(o) {if ($(o).text() == "修改") {$(o).text("保存");var c = $(o).parent().prevAll();var chang = $(o).parent().prevAll().length;for (var i = 0; i < chang; i++) {var text = c[i].textContent;c[i].innerHTML = "<input type='text' value='" + text + "'/>";}} else if ($(o).text() == "保存") {$(o).text("修改");var c = $(o).parent().prevAll();var chang = $(o).parent().prevAll().length;for (var i = 0; i < chang; i++) {c[i].innerHTML = $(c[i]).children().val();}}}//添加function add() {//复制元素clonevar c = $("tr:eq(1)").clone();//添加到table的最后c.appendTo($("table"));}//查询function find() {//需要查询的内容var cha = $("#cha").val();if (cha != "") {var result = "";var list = $("tr:gt(0)");for (var i = 0; i < list.length; i++) {if ($(list[i]).children()[0].textContent == cha) {result = $(list[i]).clone();}}if (result != "") {$("tr:gt(0)").hide();result.appendTo($("table"));}} else {window.location.reload();}}</script>
</head><body><a href="#" onclick="add()">添加</a><input type="text" id="cha" /><a href="#" onclick="find()">查询</a><table border="1"><tr><td>编号</td><td>姓名</td><td>薪水</td><td>功能</td></tr><tr><td>1</td><td>李宁</td><td>10000</td><td><a href="#" onclick="update(this)">修改</a><a href="#" onclick="del(this)">删除</a></td></tr><tr><td>2</td><td>小灰灰</td><td>12000</td><td><a href="#" onclick="update(this)">修改</a><a href="#" onclick="del(this)">删除</a></td></tr></table>
</body></html>

希望能对大家有所帮助，欢迎一键三连。

jQuery下table操作示例(附案例源码)相关推荐

NLP文本预处理：步骤、示例 | 附github源码
点击关注我哦一篇文章带你了解NLP文本预处理:步骤.示例 | 附github源码注:关注[小白玩转Python]公众号,后台回复[NLP文本预处理],可以获取完整源码以及项目所需数据集. 文本数据 ...
java多线程抽奖_java 线程池、多线程并发实战(生产者消费者模型 1 vs 10) 附案例源码...
导读前二天写了一篇<Java 多线程并发编程>点我直达,放国庆,在家闲着没事,继续写剩下的东西,开干! 线程池为什么要使用线程池例如web服务器.数据库服务器.文件服务器或邮件服务器 ...
IoC容器Autofac(2) - 一个简单示例(附demo源码)
上篇文章中(IoC容器Autofac(1) -- 什么是IoC以及理解为什么要使用Ioc),我们用自己的方式实现了一个简陋的工厂类来实现IoC. 这里我们尝试使用Auotfac来替换我们的工厂类Mov ...
mysql服务器多线程模型_java 线程池、多线程并发实战(生产者消费者模型 1 vs 10) 附案例源码 - 陈彦斌 - 博客园...
导读前二天写了一篇<Java 多线程并发编程>点我直达,放国庆,在家闲着没事,继续写剩下的东西,开干! 线程池为什么要使用线程池例如web服务器.数据库服务器.文件服务器或邮件服务器 ...
C#开发APP，ToolBar控件在Smobiler中的使用方式【附案例源码】——Smobiler移动开发平台...
控件说明底部工具栏控件. 效果演示其他效果该界面为仿淘宝UI制作的一个简单的UI模板,源码获取方式请拉至文章末尾. 特色属性属性属性说明 Direction(相对布局) 容器主轴方向. Fl ...
澳洲森林火灾蔓延数学建模，基于元胞自动机模拟多模式下火灾蔓延（附部分源码）
前言本文篇幅较长,希望各位小伙伴能够耐心看完. 元胞自动机模型可以用来模拟交通流.火灾蔓延情况.高速收费站交通情况,有利于我们更好地改善交通状况,更好地控制火灾蔓延,合理地设置收费站的数量等. 关于 ...
C++利用二次探查实现存储机制hash table的算法(附完整源码)
C++利用二次探查实现存储机制hash table的算法 C++利用二次探查实现存储机制hash table的算法完整源码(定义,实现,main函数测试) C++利用二次探查实现存储机制hash ta ...
C++利用双哈希表实现存储机制hash table的算法(附完整源码)
C++利用双哈希表实现存储机制的算法 C++利用双哈希表实现存储机制的算法完整源码(定义,实现,main函数测试) C++利用双哈希表实现存储机制的算法完整源码(定义,实现,main函数测试) #in ...
C++利用线性探查实现存储机制hash table的算法(附完整源码)
C++利用线性探查实现存储机制的算法 C++利用线性探查实现存储机制的算法完整源码(定义,实现,main函数测试) C++利用线性探查实现存储机制的算法完整源码(定义,实现,main函数测试) #in ...

jQuery下table操作示例(附案例源码)

jQuery下table操作示例(附案例源码)相关推荐

最新文章

热门文章