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. ...
随机推荐
- PAT 1003 我要通过！(20)（代码+思路）
1003 我要通过!(20)(20 分)提问 "答案正确"是自动判题系统给出的最令人欢喜的回复.本题属于PAT的"答案正确"大派送 -- 只要读入的字符串满足下 ...
- springmvc cfx 整合
1.先看一下目录列表,本人用的是eclipse 2.pom.xml <project xmlns="http://maven.apache.org/POM/4.0.0" xm ...
- bat批量重命名文件
@echo off setlocal enabledelayedexpansion set prefix="mai" set /a num=000 rem 排序/o:? -代表逆序 ...
- 管理型交换机IEEE 802.1Q VLAN设置应用实例
转载标注: IEEE802.1Q 我粗略理解为对交换机入口规则和出口规则设置,入口打上VID,设置从哪些口可以出去,并且是否带标签. 一 VLAN的概念 VLAN(Virtual Local Area ...
- 利用ajaxSubmit()方法实现Form提交表单后回调
1. 背景 最近在工作中,需要实现网页端图片上传到FTP服务器的功能.上传文件是用Form表单提交数据的方法向后台传输文件流,在此遇到了一个问题:后台在处理完图片上传功能后,需要向前台回传是 ...
- Ubuntu 16.04安装MySQL及遇到的问题解决方案
使用以下命令即可进行MySQL安装: sudo apt-get install mysql-server 上述命令会安装以下包: apparmor mysql-client-5.7 mysql-com ...
- python编码（四）
一.预备知识 字符集 1, 常用字符集分类 ASCII及其扩展字符集作用:表语英语及西欧语言.位数:ASCII是用7位表示的,能表示128个字符:其扩展使用8位表示,表示256个字符.范围:ASCII ...
- Windows could not set the offline local information.Error code：0X80000001解决方法
我的笔记本是联想Y460(白色) 昨天在重装系统的时候遇到如下错误:Windows could not set the offline local information.Error code:0X8 ...
- Exception in thread Thread-3:第三个线程意外
Status:Executing -train.py 02/09/2019 09:33:38 INFO Log level set to: INFO Using TensorFlow backend. ...
- 常用算法 （JS实现）
全排序列 function swap(array,a,b){ var m=array[a]; array[a]=array[b]; array[b]=m; } function full_sort(a ...