day57作业（包含data内容）
day57作业
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>周末作业讲解</title>
<style>
/*//覆盖*/
.cover {
position: fixed;
top: 0;
right: 0;
bottom: 0;
left: 0;
background-color: #616161;
opacity: 0.4;
z-index: 998;
}
/*//模态*/
.modal {
height: 200px;
width: 300px;
background-color: white;
position: absolute;
margin-top: -100px;
margin-left: -150px;
top: 50%;
left: 50%;
z-index: 1000;
} .hide {
display: none;
}
</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>//1
<td>日天</td>//2
<td>
<button class="edit-btn">编辑</button>
<button class="delete-btn">删除</button>
</td>
</tr>
</tbody>
</table> <div id="myCover" class="cover hide"></div>
<div id="myModal" class="modal hide">//模态
<div>
<p>
<label for="modal-name">姓名</label>
<input type="text" id="modal-name">
</p>
<p>
<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>
<script src="./jquery-3.2.1.min.js"></script>
<script> // 定义一个弹出模态框的函数
function showModal() {
$("#myCover,#myModal").removeClass("hide");//显示模态
} // 关闭模态框
function closeModal() {
// 1. 清空模态框中的input
$("#myModal").find("input").val("");
$("#myCover,#myModal").addClass("hide");//隐藏
} // 给新增按钮绑定事件
$("#add").on("click", function () { //点新增 显示模态框
// 把模态框弹出!
// $("#myCover").removeClass("hide");
// $("#myModal").removeClass("hide");
showModal()
}); // 模态框中的取消按钮绑定事件
$("#modal-cancel").on("click", function () { //点取消 隐藏模态框
// 2. 隐藏模态框
closeModal(); }); // 模态框中的提交按钮绑定事件
$("#modal-submit").on("click", function () {
// 1. 取到 用户 填写的 input框的值 模态框中内容，取值
var name = $("#modal-name").val(); // 把用户在模态框里输入的姓名获取到,保存在name变量中
var hobby = $("#modal-hobby").val(); // 把用户在模态框里输入的爱好获取到,保存在hobby变量中
var $myModalEle = $("#myModal"); // 判断,按需操作
var $currentTrEle = $myModalEle.data("currentTr");//取当前行，需要判断提交的是新增的还是编辑的。
if ($currentTrEle !== undefined) { //说明已存在的，即编辑。
// 说明是编辑状态
$currentTrEle.children().eq(1).text(name);
$currentTrEle.children().eq(2).text(hobby);
// 清空之前保存的当前行
$myModalEle.removeData();//如果不清空，永远不会==undefined，变成了编辑。
} else { //新增
// 创建tr标签把数据填进去
var trEle = document.createElement("tr");
var number = $("tr").length;//tr的长度即有几个tr就几行
$(trEle).html("<td>" + number + "</td>" +
"<td>" + name + "</td>" +
"<td>" + hobby + "</td>" +
'<td><button class="edit-btn">编辑</button> <button class="delete-btn">删除</button></td>'
);
// 把创建好的tr添加到tbody中
$("tbody").append(trEle);//添加完内容再加到内部的最后
}
// 提交完，隐藏模态框
closeModal();
}); // 2. 根据是编辑 还是新增 做不同的操作
// 2.1 如果是新增操作,就生成一条新的tr,加到table的最后
// 2.2 如果是编辑操作, 根据先前 编辑 按钮那一行
// 难点在于 如何确定 编辑的是哪一行? --> 利用data()可以存具体的jQuery对象 // 给每一行的编辑按钮绑定事件
// 要使用事件委托,基于已经存在的元素(页面加载完之后存在的标签)绑定事件
$("tbody").on("click", ".edit-btn", function () {
//事件委托，一开始只有tbody在，edit-btn是需要一直存在的
//点编辑.edit-btn时触发
// 把模态框弹出来
showModal(); // 把原来的数据填写到模态框中的input
var $currentTrEle = $(this).parent().parent();
// 把当前行的jQuery对象保存起来 编辑时
$("#myModal").data("currentTr", $currentTrEle);//编辑，用于提交时判断是编辑还是新增 var name = $currentTrEle.children().eq(1).text(); //取 索引1
var hobby = $currentTrEle.children().eq(2).text();//取 索引2的值 // 填
$("#modal-name").val(name);//点编辑后，把原来的数据放到模态框中，用于之后的修改，提交。
//提交部分在另一部分
$("#modal-hobby").val(hobby);
}); // 给每一行的删除按钮绑定事件
$("tbody").on("click", ".delete-btn", function () {
// 删除被点击的删除按钮的那一行
var $currentTrEle = $(this).parent().parent();
// 更新序号
// 找到当前行后面所有的tr,依次更新序号
//上一个this和下一个this不一样
$currentTrEle.nextAll().each(function () {//找到后面的所有，更新序号
// 取到原来的序号
var oldNumber = $(this).children().first().text();
// 将原来的序号-1,再赋值回去
$(this).children().first().text(oldNumber - 1);
});
$currentTrEle.remove();//删除 }); </script>
</body>
</html>
效果：
新增和编辑，新增按钮只需要显示模态框，编辑显示完模态框，还需保存原有行内容，并将原有行内容显示在模态框中。
删除需要修改之后每一行的编号。
提交内容需要判断该模态框是点击新建按钮产生的，还是点击编辑按钮产生的。
本题主要考察data内容。
day57作业（包含data内容）的更多相关文章
- Oracle bbed 实用示例-----修改Data内容、恢复delete的rows
bbed 可以在db open 状态来进行修改,但是建议在做任何修改操作之前先shutdown db. 这样避免checkpoint 进程重写bbed 对block 的修改. 也避免oracle 在b ...
- 转载：Python Web开发最难懂的WSGI协议，到底包含哪些内容？
原文:PSC推出的第二篇文章-<Python Web开发最难懂的WSGI协议,到底包含哪些内容?>-2017.9.27 我想大部分Python开发者最先接触到的方向是WEB方向(因为总是有 ...
- [转帖]linux下查找文件及查找包含指定内容的文件常用命令。
linux下查找文件及查找包含指定内容的文件常用命令. https://blog.csdn.net/yangyu19910407/article/details/18266821 最简单的查找 fin ...
- HTML文档可以包含的内容
通过不同的标签,HTML文档可以包含不同的内容,比如文本,链接,图片,列表,表格,表单,框架等. 文本 HTML对文本的支持是最丰富的,你可以设置不同级别的标题,分段和换行,可以指定文本的语义和外观, ...
- Arachnid包含一个简单的HTML剖析器能够分析包含HTML内容的输入流
Arachnid是一个基于Java的web spider框架.它包含一个简单的HTML剖析器能够分析包含HTML内容的输入流.通过实现Arachnid的子类就能够开发一个简单的Web spiders并 ...
- switch的穿透，是参数里包含case内容就执行。
package rom; import java.lang.*; /* * switch的穿透,是参数里包含case内容就执行. */ public class Xamle_5 { public st ...
- excel判断单元格包含指定内容的函数用=IF(COUNTIF(A1,"*内容*"),"0","1")
前面我们聊过怎样将Excel包含某字符的单元格填充颜色,这边我们用另外一种方法来实现:excel判断单元格包含指定内容的函数 选中需要显示结果的单元格,假设我们要判断第一行第一列的单元格A1是否含有“ ...
- 黑马基础阶段测试题：创建Phone（手机）类，Phone类中包含以下内容：
package com.swift; public class Phone { private String pinpai; private int dianliang; public String ...
- ssh和SSH服务(包含隧道内容)
ssh和SSH服务(包含隧道内容) 72.16.10.6:/etc/fstab-->/172.16.10.3:/tmp/a.txt. [root@xuexi ~]# scp 172.16.10. ...
随机推荐
- 子类覆写的变量被private隐藏，强制转换方式通过子类访问父类的被覆写变量：
import static java.lang.System.*; public class SuperParent{ public static void main(String[] args){ ...
- Photoshop中比较实用的小技巧
Photoshop是目前最流行的图片处理软件软件之一.能够说,只要接触图片处理,就要和它打交道.Photoshop的强大功能和众多的优点不用多说.用photoshop做一些漂亮的图片,或对照片进行简单 ...
- arm家族小检阅
- 在用easyui中做CRUD功能时，当删除一行或多行数据后再点击修改会提示你选中了多行，如何解决这个bug了?
在用easyui中做CRUD功能时,当删除一行或多行数据后再点击修改会提示你选中了多行,如何解决这个bug了? 在删除成功后,加上这句话就可以了:$("#dg").datagrid ...
- 2018.10.22 cogs2471. [EZOI 2016]源氏的数学课（线段树）
传送门 线段树入门操作. 直接把题目给的(r−i+1)∗a[i](r-i+1)*a[i](r−i+1)∗a[i]拆开变成(r+1)∗1∗a[i]−i∗a[i](r+1)*1*a[i]-i*a[i](r ...
- Django模型层（2）
https://www.cnblogs.com/yuanchenqi/articles/8963244.html from django.db import models class Author(m ...
- js获取年月日时分秒星期
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
- IntelliJ IDEA 2017版 编译器使用学习笔记(三) (图文详尽版);IDE快捷键使用
一.列操作 功能:操作多行列执行相同的功能,达到一次修改多行同类型数据的情况,如图: Json字符串,转为枚举类的字段: 首先进行,快捷键一行快速操作 1.选中命令,s ...
- 疯狂安装oracle 12c，此版本没有scott这个用户
今天要学习oracle,然后寻思下个吧,结果出现了很多问题,在此分享一下,搞疯了,太痛苦了,学的教程是用的 Oracle 11g,我去官网下载的Oracle 12g,文件很大,好不容易装好了,寻思就这 ...
- DIV+CSS实战(四)
一.说明 在上篇博文<DIV+CSS(三)>中,一个页面基本上展示出来了!下面实现以下页面上的一些功能,比方批量删除等功能.这里以批量删除为例,批量禁止,批量启用和批量删除差不多,只不过一 ...