jquery-表格的增删编辑演练-有一个小bug的
2024-05-14 03:51:26
》效果
》代码
<!DOCTYPE html>
<!--作者：pyhui-->
<html lang="zh-CN">
<head><script src="https://code.jquery.com/jquery-3.1.1.min.js"></script><meta charset="UTF-8"><title>Title</title><style>.modal{background: black;position:fixed;left:0;top:0;right:0;bottom:0;opacity: 0.4;display: none;}.info,.info_edit{position: fixed;background-color: white;width: 400px;height: 300px;left:50%;top: 50%;margin-top:-150px;margin-left:-200px;display: none;}form{width: 80%;height: 40%;/*background-color: yellow;*/margin: 50px auto 0;}</style><!-- js--><script>$(main);function main() {// 绑定事件，当取消的按钮被点击的时候，有一个函数对应$(".btn_cancle").click(dismiss_modal);// 绑定事件，当显示按钮被点击的时候，模态框显示$("#btn_show").click(show_modal);// 绑定事件，当提交按钮点击的时候，新增一行$("#btn_tijiao").click(add_line_data);// 事件委托// 委托table标签，当删除按钮被点击的时候，执行一个事件$("table").on("click","a.del", del_tr);$("table").on("click","a.edit", edit_tr);// 绑定提交编辑按钮$("#btn_edit").click(modify_data);// 修改数据function modify_data() {// 数据的获取// 获取被点击的tr标签对象var $currentTrTag = $("body").data("trTag");// 获取编辑模态框中的姓名var newName = $("#edit_username").val();// 获取下拉框中的val值var newSubject = $("#edit_subject").val();// 回填数据$currentTrTag.find("td:eq(1)").text(newName);$currentTrTag.find("td:eq(2)").text(newSubject);// 关闭模态框dismiss_edit_modal();}//编辑一行function edit_tr() {// 先拿数据，再赛到模态框中// 直接拿tr对象-被点击的a标签的父级的父级var $currentTrTag = $(this).parent().parent();$("body").data("trTag", $currentTrTag)var nameStr = $currentTrTag.find("td:eq(1)").text();var subjectStr = $currentTrTag.find("td:eq(2)").text();//把数据赛到编辑模态框中//往text框中赛入姓名$("#edit_username").val(nameStr);//往select控件中赋值$("#edit_subject").val(subjectStr);// 让模态框出现// 1，半透明盒子// 2，info_edit盒子show_edit_modal();return false;}//删除一行的代码function del_tr() {console.log(this);$(this).parent().parent().remove();return false;}// 点击提交添加一行function add_line_data() {// 数据的处理。。// 拿到学生姓名var stuName = $("form input[name=username]").val();// 拿到所学专业var subject = $("form select[name=subject]").val();// 计算下一行的序号// 得拿到最后一行的第一个td的值// 拿最后一行var $lastTrTag = $("table tr:last");// 拿第一个tdvar $firstTdTag = $lastTrTag.find("td:first");// 取td里面的值var indexStr = $firstTdTag.text();// 字符串转整数var indexInt = parseInt(indexStr)// 下一行的序号var nextIndexInt = indexInt + 1// 标签的处理，内存中准备新的标签。。。// tr行标签var $trTag = $("<tr>");// td序号标签var $tdIndex = $("<td>");// td学生姓名标签var $tdName = $("<td>");// td所学专业标签var $tdSubject = $("<td>");// td通用的操作标签var $tdAct = $("<td><a href=\"\" class=\"edit\">编辑</a>| <a href=\"\" class=\"del\">删除</a></td>");// 标签中插入数据// td序号标签，添入序号$tdIndex.text(nextIndexInt);// td姓名插入$tdName.text(stuName);// 专业的插入$tdSubject.text(subject);// 标签的填入操作// tr标签的填入。 使用 父标签.append（子标签的方法填入）$("table").append($trTag);// tr标签append，序号标签 <tr><td>序号</td></tr>// tr标签append，学生标签 <tr><td>序号</td> <td>学生姓名</td></tr>// tr添加专业标签// tr添加操作标签$trTag.append($tdIndex, $tdName, $tdSubject, $tdAct);// 添加前 table标签是这样的 <table> <tr>第一行</tr></table>// table标签append，我们准备好的这个tr标签 <table> <tr>第一行</tr><tr>上面准备好的tr</tr> </table>dismiss_modal()}// 让模态框出现function show_modal() {// 让input文本框value值为空$("#add_username").val("");$(".modal").css("display","block");$(".info").css("display", "block");}// 让模态编辑框出现function show_edit_modal() {$(".modal").css("display","block");$(".info_edit").css("display", "block");}//让模态框消失function dismiss_modal() {// 目标，点击取消，让模态框消失// 操作标签对象的属性，设置css的display为none$(".info").css("display","none");$(".info_edit").css("display","none");$(".modal").css("display","none");}//让编辑模态框消失function dismiss_edit_modal() {// 目标，点击取消，让模态框消失// 拿到标签对象var $divInfo = $(".info_edit");// 操作标签对象的属性，设置css的display为none$divInfo.css("display","none");$(".modal").css("display","none");}}</script>
</head>
<body><input type="button" value="添加学生" id="btn_show"><!--遮罩层-->
<div class="modal">1</div><!--信息层-->
<div class="info">
<!-- 表单--><form action="">姓名：<input type="text" name="username" id="add_username"> <br><select name="subject" id=""><option value="python">python</option><option value="php">php</option><option value="go">go</option><option value="java">java</option></select><br><input type="button" value="提交" id="btn_tijiao"><input type="button" value="取消" class="btn_cancle"></form>
</div><!--信息层2 编辑的-->
<div class="info_edit">
<!-- 表单--><form action="">姓名：<input type="text" name="username" id="edit_username"> <br><select name="subject" id="edit_subject"><option value="python">python</option><option value="php">php</option><option value="go">go</option><option value="java">java</option></select><br><input type="button" value="提交修改" id="btn_edit"><input type="button" value="取消" class="btn_cancle"></form>
</div><h1>学生列表</h1>
<table border="1">
<tr><td>序号</td><td>学生姓名</td><td>所选专业</td><td>操作</td>
</tr><tr><td>1</td><td>张三</td><td>python</td><td><a href="" class="edit">编辑</a>| <a href="" class="del">删除</a> </td>
</tr></table>
</body>
</html>
jquery-表格的增删编辑演练-有一个小bug的相关推荐
- jQuery表格的行编辑
jQuery表格的行编辑 单击单元格,单元格显示为一个控件 然后,在控件中输入或者选择值,失去焦点之后 获取该控件的值,显示在单元格中 控件可以是input.select.datetime等 Inpu ...
- windows中的一个小bug
无意中发现的windows的一个小bug,同时按下"ctrl"键和"alt"键时,过一秒钟左右cpu占用就会达到100%,在两台机器试验了一下都这样.因为也不是 ...
- xlnx4.0中关于SPI-nor-flash的一个小bug
最经搞关于zynq7000,用到了petalinux,其中用的内核版本为xlnx4.0.再处理nandflash问题是,发现如下问题,阅读关于与扩展地址操作的原代码,从纸面上看应该属于一个小bug.原 ...
- iOS开发之使用UICollectionView实现美团App的分类功能【偶现大众点评App的一个小bug】...
郝萌主倾心贡献,尊重作者的劳动成果,请勿转载. 假设文章对您有所帮助,欢迎给作者捐赠,支持郝萌主,捐赠数额任意,重在心意^_^ 我要捐赠: 点击捐赠 Cocos2d-X源代码下载:点我传送 游戏官方下 ...
- ST电机库v5.4.4源代码分析(2): 磁链圆限制之计算以及一个小bug
编者:沉尸 (5912129@qq.com) FOC流程图 Circle_Limitation所在位置 图1 图2 现在计算出了和,需要限制: 如果 显然需要一个缩小的系数i (i < 1)进行 ...
- js 通过jquery插件获取url参数 其中的一个小问题，或许不算Bug。
形如:http://localhost:10864/srch.htm?keys=&type=1 这样的地址,如果我们要取keys的参数: var srchKey = $.query.get(& ...
- 表格太长如何打印？一个小功能，轻松就搞定！！
在工作中,我们经常会遇到数据全部在一列,当我们需要打印出来的时候,发现占用很多张纸,造成大量的浪费! 其实我们可以将这样的一列数据拆分成下图这种多列的形式,这样打印起来就会节约很多 具体方法: ste ...
- runtime 日志权限不够_MySQL权限处理的一个小bug
这是学习笔记的第 2103 篇文章 最近碰到了一个奇怪的权限问题,问题的背景是业务同学反馈在下班后,有一个数据表出现了阻塞,导致后续的业务流程都产生了拥堵,在对这个问题进行分析发现,业务同学所谓的拥堵 ...
- 发现了阿里云 APP 的一个小 BUG
由于微信不允许外部链接,你需要点击文章尾部左下角的 "阅读原文",才能访问文中链接. 前几天在华为手机上使用阿里云 APP,从 oss bucket 中下载了一张图片,想要通过微信 ...
最新文章
- sklearn.inspection.permutation_importance 衡量特征重要性的方法比随机森林自带的rf.feature_importance 如何
- npm ERR! missing script: dev 解决方案
- centos打显卡驱动命令_CentOS7显卡驱动问题
- 是时候抛弃web.xml了？
- 生产过程中计算机软件的确认--简述医疗器械生产过程确认
- python 创建空的numpy数组_数据分析-NumPy内置函数创建数组
- java interface 实例_Java - Interface 接口的实现方式实例
- 选择自己用的到的文件编译一个CEGUISample（一）
- [Redis]Redis的数据类型
- 通过网易云歌单链接下载网易云歌曲
- 应用案例 | 2017款道奇RAM 1500车偶尔指南针无显示、空调不工作故障诊断
- Greasy Fork、GitHub、OpenUserJS
- 解决uni.request时uni.showtoast无效问题
- java 求正割_Java 反射机制详解
- Excel如何分别提取出数值整数部分和小数部分
- SAP BP 业务实践与ABAP 分享
- 将一串数字转为大写人民币形式
- 如何修改服务器远程登录密码
- 上拉电阻、下拉电阻、耦合电容、退耦电容 总结
- Windows 10 各版本