JQuery 实例：表格列表数据 增删改查 窗口(隐藏层)
来源：互联网 发布：linux 查看磁盘格式 编辑：程序博客网 时间：2024/05/19 03:44
<!DOCTYPE html><html xmlns="http://www.w3.org/1999/xhtml"><head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title></title> <style> #bgDiv { position: absolute; left: 0px; top: 0px; background-color: black; opacity: 0.2; /*设置不透明度，即可以看到层下面的内容，但是由于层的遮挡，背景是不可以进行操作的*/ display: none; } #fgDiv { position: absolute; width: 300px; height: 100px; border: 1px solid red; background-color: #e7e7e7; display: none; } </style> <script src="scripts/jquery-1.7.1.min.js"></script> <script> var list = [{ id: '1', country: '中国', capital: '北京' },{ id: '2', country: '美国', capital: '华盛顿' },{ id: '3', country: '日本', capital: '东京' },{ id: '4', country: '韩国', capital: '首尔' } ]; $(function () { //生成表格数据 $.each(list, function() { $('<tr id="'+this.id+'">' + '<td><input type="checkbox"/></td>' + '<td>'+this.id+'</td>' + '<td>'+this.country+'</td>' + '<td>'+this.capital+'</td>' + '<td><input type="button" value="修改"/></td>' + '</tr>').appendTo('#list'); }); //为复选框chkAll设置点击事件，完成全选、全消的功能 $('#chkAll').click(function () { //根据当前复选框的状态设置其它行复选框的状态 $('#list :checkbox').attr('checked', this.checked); }); //反选 $('#btnReverse').click(function () { //获取实际数据行的复选框 $('#list :checkbox').each(function() {//jquery对象.each this.checked = !this.checked; }); }); //删除选中项 $('#btnRemove').click(function() { //确认 if (confirm('确定要删除吗')) { //获取所有数据行中选中的checkbox //$('#list :checked').parent().parent().remove(); //直接在祖宗节点中找到tr节点 $('#list :checked').parents('tr').remove(); } }); //添加 $('#btnAdd').click(function () { //显示添加界面 $('#bgDiv').css('display', 'block') .css('width', window.innerWidth + 'px') .height(window.innerHeight + 'px'); $('#fgDiv').css('display', 'block') .css('left', (window.innerWidth - 300) / 2 + 'px') .css('top', (window.innerHeight - 100) / 2 + 'px'); //清除文本框中的数据 $('#fgDiv :text,:hidden').val(''); }); //保存 $('#btnSave').click(function () { var id = $('#hidId').val(); if (id == '') { //如果是添加 $('<tr id="' + $('#txtId').val() + '">' + '<td><input type="checkbox"/></td>' + '<td>' + $('#txtId').val() + '</td>' + '<td>' + $('#txtCountry').val() + '</td>' + '<td>' + $('#txtCapital').val() + '</td>' + '<td><input type="button" value="修改"/></td>' + '</tr>').appendTo('#list') .find(':button').click(function () {//为修改按钮绑定事件 //显示添加界面 $('#bgDiv').css('display', 'block') .css('width', window.innerWidth + 'px') .height(window.innerHeight + 'px'); $('#fgDiv').css('display', 'block') .css('left', (window.innerWidth - 300) / 2 + 'px') .css('top', (window.innerHeight - 100) / 2 + 'px'); //找到当前按钮所在td的之前的所有td，因为数据就在这些td中 var tds = $(this).parent().prevAll(); //设置文本框的值 $('#hidId').val(tds.eq(2).text());//用于存放修改行的id。并用于判别是添加操作还是修改。 $('#txtId').val(tds.eq(2).text()); $('#txtCountry').val(tds.eq(1).text()); $('#txtCapital').val(tds.eq(0).text()) }); } else {//否则是修改 var tds = $('#' + id + '>td'); tds.eq(1).text($('#txtId').val()); tds.eq(2).text($('#txtCountry').val()); tds.eq(3).text($('#txtCapital').val()); //改tr的id属性，保持数据一致 $('#' + id).attr('id', $('#txtId').val()); } //隐藏层 隐藏起来。 $('#bgDiv').css('display', 'none'); //遮挡背景层(半透明) $('#fgDiv').css('display', 'none'); //逻辑 添加/修改 界面 }); //修改 $('#list :button').click(function() { //显示添加界面 $('#bgDiv').css('display', 'block') .css('width', window.innerWidth + 'px') .height(window.innerHeight + 'px'); $('#fgDiv').css('display', 'block') .css('left', (window.innerWidth - 300) / 2 + 'px') .css('top', (window.innerHeight - 100) / 2 + 'px'); //找到当前按钮所在td的之前的所有td，因为数据就在这些td中 var tds = $(this).parent().prevAll(); //设置文本框的值 $('#hidId').val(tds.eq(2).text());//用于存放修改行的id。并用于判别是添加操作还是修改。 $('#txtId').val(tds.eq(2).text()); $('#txtCountry').val(tds.eq(1).text()); $('#txtCapital').val(tds.eq(0).text()); }); }); </script></head> <body> 修改操作：1、将原有数据展示在div中；2、点击保存时，需要知道对应表格中的哪行数据；3、为新增的修改按钮绑定事件 <br/> 难点：在第2步中，如何在点击div中按钮时，知道对应原表格中的哪行数据 <hr/> <input type="button" id="btnAdd" value="添加" /> <input type="button" id="btnReverse" value="反转"/> <input type="button" id="btnRemove" value="删除选中项"/> <table border="1"> <thead> <th width="100"><input type="checkbox" id="chkAll"/></th> <th width="100">编号</th> <th width="100">国家</th> <th width="100">首都</th> <th width="100">修改</th> </thead> <tbody id="list"> </tbody> </table> <!--隐藏层在最顶层，放在最后--> <div id="bgDiv"> <!--隐藏层，背景遮挡层(半透明)--> </div> <div id="fgDiv"> <!--隐藏层，逻辑业务窗口层--> <input type="hidden" id="hidId"/> 编号：<input type="text" id="txtId"/> <br/> 国家：<input type="text" id="txtCountry"/> <br/> 首都：<input type="text" id="txtCapital"/> <br/> <input type="button" id="btnSave" value="保存"/> </div> </body></html>阅读全文
0 0
- JQuery 实例：表格列表数据 增删改查 窗口(隐藏层)
- 表格增删查改
- 增删改查表格
- 原生JavaScript实现列表/表格的增删查改
- Jquery增删改查
- javascript 表格 增删改查
- 表格 增删改查排序
- js 动态表格 可以实现增删改查数据
- JavaScript对数据表格的增删改查操作详解
- HibernateDao层增删改查
- jquery 完成数据的增删改，动态操作表格数据。
- EF5 通用数据层 增删改查操作，泛型类
- EF 通用数据层 增删改查操作，泛型类II
- js增删改查列表
- 增删改查的列表
- Webform GridView列表增删改查结合EF数据绑定
- jQuery实例--Ajax信息的增删改查等操作
- JDBC增删改查实例
- POJ 2251 Dungeon Master(3维BFS)
- Gradle错误汇总
- 【Unity开发】persp和iso两种模式的区别
- Redis哨兵模式及配置
- kafka、zk集群二
- JQuery 实例：表格列表数据 增删改查 窗口(隐藏层)
- 如果看了此文你还不懂傅里叶变换，那就过来掐死我吧【完整版】
- OPEN AS2环境搭建（一）
- svn更新出现乱码
- Memcache缓存系统原理
- Ue4-iPhone真机运行
- public,private,protected在C++中的作用
- 匿名内部类
- leetcode 594. Longest Harmonious Subsequence 最长和谐子序列 + Map遍历统计
