jQuery-对列表的操作
主要是通过对dom元素的增加和删除实现对数据增加和删除
<!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="jquery-3.4.1.js"></script>
<style type="text/css">
* {
margin: 0;
padding: 0;
} a {
text-decoration: none;
} input {
outline: none;
font-size: 16px;
box-sizing: border-box;
border: aliceblue solid .5px;
} body {
margin: 30px auto;
width: 510px;
} .btn {
width: 80px;
height: 30px;
position: relative;
left: 380px;
margin-bottom: 10px;
} .btn button {
width: 80px;
height: 30px;
background: #3ca7ed;
color: aliceblue;
font-size: 16px;
outline: none;
border-style: none;
} .btn button:hover {
background: #0a84d4;
} table {
border: solid aliceblue 1px;
border-collapse: collapse;
} .code,
.name,
.sex,
.grader,
.del a,
input {
width: 100px;
height: 30px;
line-height: 30px;
padding-left: 5px;
} tbody tr:nth-child(even) {
background: aliceblue;
} .header {
background: #3ca7ed;
color: aliceblue;
} .del a {
text-align: right;
padding-right: 5px;
color: #3ca7ed;
} .opr a {
font-size: 16px;
color: #3ca7ed;
margin-left: 10px;
}
</style> <style>
/* 删除/添加 */
.dialog,
.add-dialog {
display: none;
margin: 0 auto;
width: 400px;
height: 150px;
position: absolute;
top: 150px;
background: aliceblue;
text-align: center;
line-height: 65px;
font-size: 18px;
} .add-dialog {
height: 270px;
} .add-dialog div {
height: 40px;
} .add-dialog div input {
width: 200px;
padding: 10px;
margin: 10px;
} .dialog .header,
.add-dialog .header {
background: #3ca7ed;
color: aliceblue;
height: 35px;
text-align: left;
padding-left: 10px;
line-height: 35px;
} .dialog button,
.add-dialog button {
display: inline-block;
width: 50px;
height: 30px;
background: #3ca7ed;
outline: none;
color: #f9f9f9;
border-style: none;
position: absolute;
bottom: 10px;
right: 10px;
} .dialog button:hover,
.add-dialog button:hover {
background: #3ca7ed;
;
} #confirm {
right: 75px;
}
</style> <script>
$(function () {
// 删除
function del_tr() {
var $tr = $(this).parent();
var code = $tr.children(':first').html();
$('.dialog').show();
$('.dialog .text').html("确定要删除[" + code + "]吗？"); $(".dialog #confirm").click(function () {
$($tr).remove();
$('.dialog').hide();
}); $(".dialog #concel").click(function () {
$('.dialog').hide();
});
}; $('.del').click(del_tr) //添加
$('#student-add').click(function () { $('.add-dialog').show(); $('.add-dialog #confirm').unbind('click'); //事件解绑
$('.add-dialog #confirm').click(function () {
var $code = $('.add-dialog .code');
var $name = $('.add-dialog .name');
var $sex = $('.add-dialog .sex');
var $grader = $('.add-dialog .grader');
var del = "<td class='del'><a href='#'>删除</a></td>"; var code = $code.val();
var name = $name.val();
var sex = $sex.val();
var grader = $grader.val(); $('<tr></tr>')
.append('<td>' + code + '</td>')
.append('<td>' + name + '</td>')
.append('<td>' + sex + '</td>')
.append('<td>' + grader + '</td>')
.append(del)
.appendTo('tbody')
.find('.del')
.click(del_tr)
// 输入框清空
$code = $('.add-dialog .code').val('');
$name = $('.add-dialog .name').val('');
$sex = $('.add-dialog .sex').val('');
$grader = $('.add-dialog .grader').val(''); $('.add-dialog').hide(); }); // 添加中取消按钮
$(".add-dialog #concel").click(function () {
$('.add-dialog').hide(); // 输入框清空
$code = $('.add-dialog .code').val('');
$name = $('.add-dialog .name').val('');
$sex = $('.add-dialog .sex').val('');
$grader = $('.add-dialog .grader').val('');
});
});
});
</script>
</head> <body>
<div class="btn">
<button id="student-add">添加</button>
</div>
<table>
<tr class="header">
<td class="code">学号</td>
<td class="name">姓名</td>
<td class="sex">性别</td>
<td class="grader">年级</td>
<td class="del"><a href="#"></a></td>
</tr>
<tr>
<td class="code">30001</td>
<td class="name">段瑞琦</td>
<td class="sex">男</td>
<td class="grader">三年级二班</td>
<td class="del"><a href="#">删除</a></td>
</tr>
<tr>
<td class="code">40002</td>
<td class="name">韩子萱</td>
<td class="sex">女</td>
<td class="grader">四年级二班</td>
<td class="del"><a href="#">删除</a></td>
</tr>
<tr>
<td class="code">20101</td>
<td class="name">严寒</td>
<td class="sex">男</td>
<td class="grader">二年级一班</td>
<td class="del"><a href="#">删除</a></td>
</tr>
<tr>
<td class="code">60012</td>
<td class="name">钱小龙</td>
<td class="sex">男</td>
<td class="grader">六年级六班</td>
<td class="del"><a href="#">删除</a></td>
</tr>
</table>
<div class="dialog">
<div class="header">删除</div>
<div class="text"></div>
<button id="confirm">确定</button>
<button id="concel">取消</button>
</div>
<div class="add-dialog">
<div class="header">添加</div>
<div>学号<input type="text" class="code"></div>
<div>姓名<input type="text" class="name"></div>
<div>性别<input type="text" class="sex"></div>
<div>年级<input type="text" class="grader"></div>
<button id="confirm">确定</button>
<button id="concel">取消</button>
</div>
</body> </html>
结果
jQuery-对列表的操作的更多相关文章
- jQuery实现列表框双向选择操作
对列表框的操作经常碰到过这样的应用:从左侧的列表框中选中要选的项添加到右侧列表框中,然后提交最终选择的项,对误操作而选中的项还可以执行移除操作.在很多系统中应用比如说求职网站的选择意向工作地区,QQ好 ...
- jQuery中的DOM操作《思维导图》
首先,是关于jQuery中的DOM操作的<思维导图>,请点击这里:jQuery中的DOM操作 列表框的左右选项移动 <html> <head> <title& ...
- jquery系列教程3-DOM操作全解
全栈工程师开发手册 (作者:栾鹏) 快捷链接: jquery系列教程1-选择器全解 jquery系列教程2-style样式操作全解 jquery系列教程3-DOM操作全解 jquery系列教程4-事件 ...
- [转]jQuery 选择器和dom操作
居然是12年的总结.... 文章地址: http://www.cnblogs.com/happyPawpaw/articles/2595092.html JQuery选择器 1.基本选择器 基本选择器 ...
- 【Java EE 学习 33 上】【JQuery样式操作】【JQuery中的Ajax操作】【JQuery中的XML操作】
一.JQuery中样式的操作 1.给id=mover的div采用属性增加样式.one $("#b1").click(function(){ $("#mover" ...
- JQuery中的DOM操作
JQuery中有很多DOM操作,但是因为之前没有总结过,所以用来用去都是那几个,一写html中的表单交互,尤其是那些复杂的表单交互,就是一大坨的js,我自己看着都费劲. 所以我感觉有必要总结一下 &l ...
- Jquery基础之DOM操作
转自:http://www.cnblogs.com/bro-ma/p/3063942.html JQuery中的DOM操作主要对包括:建[新建].增[添加].删[删除].改[修改].查[查找][像数据 ...
- python学习04——列表的操作
笨办法学python第38节 如何创建列表在第32节,形式如下: 本节主要是讲对列表的操作,首先讲了 mystuff.append('hello') 的工作原理,我的理解是,首先Python找到mys ...
- jQuery -- DOM节点的操作
DOM 操作的分类: dom core: getElementById() getElementsByTagName() getAttribute() setAttribute() html-dom ...
- jQuery Mobile 列表内容
jQuery Mobile 列表缩略图 对于大于 16x16px 的图像,请在链接中添加 <img> 元素. jQuery Mobile 将自动把图像调整至 80x80px: 实例: &l ...
随机推荐
- CodeWarrior IDE烧写介绍
点击Flash烧写 选择芯片系列 下面将以PPC8548 NOR Flash烧写为例 默认配置文件目录:C:\Program Files (x86)\Freescale\CodeWarrior PA ...
- MySQL 部署分布式架构 MyCAT (一)
架构 环境 主机名 IP db1 192.168.31.205 db2 192.168.31.206 前期准备 开启防火墙,安装配置 mysql (db1,db2) firewall-cmd --pe ...
- Linux—各种重要配置文件详解
一./etc/profile文件详解(环境变量) 添加环境变量 .编辑profile文件 [root@localhost ~]# vi /etc/profile .在profile文件中添加如下内容 ...
- C++学习五 const vector<int>类型的迭代器使用
一情景: 算法功能:对于传入的vector, 能够找到两个数字,使其相加之和为target,然后返回这两个数字的位置(也就是秩) 最开始是这样的一个问题: 对于一个传入的const vector< ...
- Html学习之四（页面布局）
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...
- scrapy 爬取视频
利用FilesPipeline 下载视频 1.setting.py # 保存log信息的文件名 LOG_LEVEL = "INFO" # LOG_STDOUT = True # L ...
- 安装QTP之后造成环境变量java冲突问题的解决方案
参考:http://www.cnblogs.com/yhcreak/p/6340125.html
- Node.js中的模块接口module.exports
在写node.js代码时,我们经常需要自己写模块(module).同时还需要在模块最后写好模块接口,声明这个模块对外暴露什么内容.实际上,node.js的模块接口有多种不同写法.在此做了个简单的总结. ...
- Git& GitHub常用的操作
Git是目前世界上最先进的分布式版本控制系统. 创始人:Linus Torvalds林纳斯·托瓦兹 经典的集中管理型(CVS.VSS.SVN) 版本管理系统: 1.版本管理的服务器一旦崩溃,硬盘损坏, ...
- Linux环境变量配置方法
Linux上环境变量配置分为设置永久变量和临时变量两种.环境变量设置方法同时要考虑环境Shell类型,不同类型的SHELL设置临时变量方法和设置永久变量对应的配置文件不同.Linux环境变量本身配置过 ...