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 ...
随机推荐
- 推荐一款适合Dynamics 365/Dynamics CRM 2016 使用的弹出窗插件AlertJs
Github地址: https://github.com/PaulNieuwelaar/alertjs 目前有两个版本,3.0版本(30天免费试用)以及2.1版本(完全免费) ------------ ...
- ICMP重定向 Redirect netwox libpcap netwag
搭建环境 两台虚拟机. 攻击者:192.168.1.8 被攻击者:192.168.1.9 网络配置 主机均采用DHCP 如果没有路由器,可以使用NAT模式来做 攻击者配置 打开转发数据包功能 # su ...
- NSURLSession的知识小记
1.NSURLSession的使用流程 使用NSRULSession对象创建Task, 然后执行Task 2.获取NSURLSession ()获得共享的Session + (NSURLSession ...
- Vue.js+cube-ui（Scroll组件）实现类似头条效果的横向滚动导航条
本博主在一次个人移动端项目中,遇到这么一个需求:希望自己的项目中,头部导航条的效果可以像今日头条那样,横向滚动! 对于这样的效果,在各大移动端项目中几乎是随处可见,为什么呢? 我们都知道,对于移动端也 ...
- [20191011]拆分rowid 2.txt
[20191011]拆分rowid 2.txt --//有了链接http://blog.itpub.net/267265/viewspace-2659612/=>[20191011]bash任意 ...
- [20190918]关于函数索引问题.txt
[20190918]关于函数索引问题.txt 1.环境:SCOTT@test01p> @ ver1PORT_STRING VERSION BA ...
- 组装数据- 对象里面是key:value, value里面是数组的形式，如 {key:[aa,bb], key:[cc,dd]}
组合后 对象里面是key:value,value里面是数组的形式{key:[aa,bb], key:[cc,dd]} var chinaGeoCoordMap = { '无锡市': [121.4648 ...
- gn-build
I'm not completely sure from the error you describe but it sounds like you don't have a .gn file in ...
- conda基础命令
1.首先在所在系统中安装Anaconda.可以打开命令行输入conda -V检验是否安装以及当前conda的版本. 2.conda常用的命令. 1)conda list 查看安装了哪些包. 2)con ...
- ASP.NET开发实战——（十）ASP.NET MVC 与数据库之MySQL&EF
之前介绍EF时介绍了provider这个配置项,而且也介绍了在ASP.NET访问MySQL数据仍然是通过ADO.NET,不同的地方仅仅是更换了MySQL的数据提供器,那么在EF中是否也只需更换“提供器 ...