jQuery 作业三个按钮
作业三个按钮
<!--声明 文档-->
<!DOCTYPE html>
<!--定义字符集-->
<html lang="zh-CN">
<head>
<!--定义编码格式-->
<meta charset="UTF-8">
<!--如果网页打不开设置显示内容,并跳转链接-->
<meta http-equiv="x-ua-compatible" content="IE=edge">
<!--设置标题-->
<title>就三个按钮的作业讲解</title>
<!--为了确保适当的绘制和触屏缩放,需要在head标签中添加viewport"元素数据标签-->
<meta name="viewport" content="width=device-width, initial-scale=1">
<!--设置风格-->
<style> /*隐藏的样式类,默认不显示*/
.hide {
display: none;
} /*遮罩层,隐藏的,位置固定,顶部,右边左边,下边,透明度,垂直高度*/
.cover {
position: fixed;
top: 0;
right: 0;
left: 0;
bottom: 0;
background-color: black;
opacity: 0.8;
z-index: 999;
}
/*形式的,位置固定,顶部,左边,高度,宽度,外边距顶部,外边距左边 ,背景颜色,垂直高度*/
.modal {
position: fixed;
top: 50%;
left: 50%;
height: 200px;
width: 400px;
margin-top: -100px;
margin-left: -200px;
background-color: white;
z-index: 1000;
}
</style>
</head>
<body> <!--新增按钮-->
<button id="add">新增</button> <!--表格-->
<table border="1">
<!--表头-->
<thead>
<tr>
<!--表头数据-->
<th>#</th>
<th>姓名</th>
<th>爱好</th>
<th>操作</th>
</tr>
</thead>
<!--表主内容-->
<tbody>
<tr>
<!--表内容的数据-->
<td>1</td>
<td>Egon</td>
<td>街舞</td>
<td>
<!--设置编辑按钮和删除按钮-->
<button class="edit-btn">编辑</button>
<button class="delete-btn">删除</button>
</td>
</tr>
<tr>
<!--表内容的数据-->
<td>2</td>
<td>Alex</td>
<td>烫头</td>
<td>
<!--设置编辑按钮和删除按钮-->
<button class="edit-btn">编辑</button>
<button class="delete-btn">删除</button>
</td>
</tr>
<tr>
<!--表内容的数据-->
<td>3</td>
<td>苑局</td>
<td>日天</td>
<td>
<!--设置编辑按钮和删除按钮-->
<button class="edit-btn">编辑</button>
<button class="delete-btn">删除</button>
</td>
</tr>
</tbody>
</table> <!--div模块-->
<div id="myCover" class="cover hide"></div>
<!--内部div模块-->
<div id="myModal" class="modal hide">
<div>
<p>
<!--使input标签不变黄-->
<label for="modal-name">姓名</label>
<input type="text" id="modal-name">
</p>
<p>
<!--使input标签不变黄-->
<label for="modal-hobby">爱好</label>
<input type="text" id="modal-hobby">
</p>
<p>
<!--提交和取消按钮-->
<button id="modal-submit">提交</button>
<button id="modal-cancel">取消</button>
</p>
</div>
</div> <!--引入jquery-3.3.1.js-->
<script src="jquery-3.3.1.js"></script>
<script>
// 弹出模态框的函数
function showModal() {
// 把模态框显示出来
$("#myCover, #myModal").removeClass("hide");
} // 隐藏模态框的函数
function hideModal() {
// 把模态框隐藏起来
$("#myCover, #myModal").addClass("hide");
// 清空模态框中input标签的值
$("#modal-name, #modal-hobby").val("");
} // 新增按钮绑定事件
$("#add").on("click", function () {
showModal();
}); // 给模态框中的取消按钮绑定事件
$("#modal-cancel").on("click", function () {
hideModal();
});
var $table = $("table");
// 表格中每一行的删除按钮,绑定事件
$table.on("click", ".delete-btn", function () {
// 更新表格中当前行后面每一行的序号
// 找到当前行后面的每一行
$(this).parent().parent().nextAll().each(function () {
// each中的this和外面的this不一样了!
var num = $(this).children().first().text();
$(this).children().first().text(num-1);
});
// 找到当前行,删除
$(this).parent().parent().remove();
});
// 编辑按钮绑定事件
$table.on("click", ".edit-btn", function () {
// 显示模态框
showModal();
// 把原来的内容填充到模态框中
// 取到当前编辑的这一行
var $currentTr = $(this).parent().parent();
// 将当前编辑行保存到模态框对象中
$("#myModal").data("key", $currentTr);
// 1. 取值
var name = $currentTr.children().eq(1).text();
var hobby = $currentTr.children().eq(2).text();
// 填充到模态框
$("#modal-name").val(name);
$("#modal-hobby").val(hobby);
}); // 点击模态框中的提交按钮
$("#modal-submit").on("click", function () {
// 获取模态框中input的值
var name = $("#modal-name").val();
var hobby = $("#modal-hobby").val(); // 如何区分是编辑还是新增
var $tr = $("#myModal").data("key"); if ($tr !== undefined){ // 可以简写,这里是为了引出来好理解
// 是编辑操作
$tr.children().eq(1).text(name);
$tr.children().eq(2).text(hobby);
// 编辑完之后要把之前保存的data删掉
$("#myModal").removeData("key");
}else {
// 就是新增操作
// 创建一个新的tr标签
var newTr = document.createElement("tr");
// 塞td标签
var num = $("table tr").length;
var eleStr = "<td>" + num + "</td>";
eleStr += "<td>" + name + "</td>";
eleStr += "<td>" + hobby + "</td>";
eleStr += "<td>" + '<button class="edit-btn">编辑</button> <button class="delete-btn">删除</button>' + "</td>";
newTr.innerHTML = eleStr;
// 将新创建的tr标签追加到table里
$("tbody").append(newTr);
}
// 隐藏模态框
hideModal();
})
</script>
</body>
</html>
jQuery 作业三个按钮的更多相关文章
- jQuery Mobile 中创建按钮
在 jQuery Mobile 中创建按钮 jQuery Mobile 中的按钮可通过三种方法创建: 使用 <button> 元素 使用 <input> 元素 使用 data- ...
- 一款基于jquery的喜欢动画按钮
今天给大家带来一款基于jquery的喜欢动画按钮.这个实例中给了三种动画特效.效果图如下: 在线预览 源码下载 实现的代码. html代码: <p class='heading'> C ...
- 第一百九十七节,jQuery EasyUI,LinkButton(按钮)组件
jQuery EasyUI,LinkButton(按钮)组件 学习要点: 1.加载方式 2.属性列表 3.方法列表 本节课重点了解 EasyUI 中 LinkButton(按钮)组件的使用方法,这个组 ...
- jQuery EasyUI,LinkButton(按钮)组件
转自:https://www.cnblogs.com/adc8868/p/6639570.html jQuery EasyUI,LinkButton(按钮)组件 学习要点: 1.加载方式 2.属性列表 ...
- JQuery Dialog 禁用X按钮关闭对话框,-摘自网络
JQuery Dialog 禁用X按钮关闭对话框,禁用ESC键关闭代码如下:$("#div1").dialog({ closeOnEscape: false, open: ...
- JQuery实现点击按钮切换图片(附源码)--JQuery基础
JQuery实现切换图片相对比较简单,直接贴代码了哈,有注释噢!疑问请追加评论哈,不足之处还请大佬们指出! 1.案例代码: demo.html: <!DOCTYPE html><ht ...
- JAVA作业三
(一)学习总结 1.阅读下面程序,分析是否能编译通过?如果不能,说明原因.应该如何修改?程序的运行结果是什么?为什么子类的构造方法在运行之前,必须调用父 类的构造方法?能不能反过来? class Gr ...
- C# 隐藏最大化、最小化和关闭三个按钮
在Windows的窗体编程中,基本上每一个窗体都是一个最小化.最大化和关闭按钮的. 一.禁用最大化和最小化 对于最大化和最小化按钮,在C#窗体开发时,各一个属性来启用或禁用这两个按钮. this.Ma ...
- 作业三:LINUX内核的启动过程
作业三:LINUX内核的启动过程 一.使用GDB跟踪内核从start_kernel到init进程启动(附实验截图) (一)使用自己的Linux系统环境搭建MenuOS的过程 下载内核源代码编译内核 c ...
随机推荐
- 遍历DOM树,获取父节点
通过获取父节点,还可以获取父节点的父节点. 有3个常用方法: 方法 说明 parent() 选取父节点 parents() 选取所有父节点 parentsUntil("div&q ...
- php 查看当前页中的post及get数据
file_put_contents("log1209.html",date('Y-m-d H:i:s ')."-----<br>",FILE_APP ...
- 30.深入理解abstract class和interface
- 常用dos命令和windows系统快捷键
一.dos命令[重难点]1.OS——操作系统2.如何进入dos窗口?——P111 开始——程序——运行——输入cmd3.常用的dos操作命令 3.1 返回上一级 cd.. 3.2 返回到根目录 cd\ ...
- GIS案例学习笔记-CAD数据分层导入现有模板实例教程
GIS案例学习笔记-CAD数据分层导入现有模板实例教程 联系方式:谢老师,135-4855-4328,xiexiaokui#qq.com 1. 原始数据: CAD数据 目标模板 2. 任务:分5个图层 ...
- tomcat生成调试日志配置
创建文件logging.properties 文件存放于应用WEB-INF/classes下 文件内容如下: org.apache.juli.FileHandler.prefix = error-d ...
- C# CefSharp MemoryStreamResponseFilter这个类使用过程中遇到的bug,dataIn.CopyTo(dataOut)异常
使用这个类,可以获取请求的所有数据,可用来下载网站的图片.js等 cef给出的源码 dataIn.CopyTo(dataOut);这句代码,有时候会有问题.问题是这个:dataIn.length 会大 ...
- 源码编译安装Python3及问题解决
https://chowyi.com/%E6%BA%90%E7%A0%81%E7%BC%96%E8%AF%91%E5%AE%89%E8%A3%85Python3%E5%8F%8A%E9%97%AE%E ...
- 2018面向对象程序设计(Java) 第2周学习指导及要求
2018面向对象程序设计(Java) 第2周学习指导及要求(2018.9.3-2018.9.9) 学习目标 适应老师教学方式,能按照自主学习要求完成本周理论知识学习: 掌握Java Applica ...
- Gradle安装和在IDEA使用 基本操作
阅读目录 简单介绍 安装 使用idea创建一个web的Gradle项目 如何进行打包 解释build.gradle和settings.gradle 有关gradle的jar冲突 本地jar包位置和修改 ...