<!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.js"></script>
    <script>
        var list = [
    { id: '1', country: '中国', capital: '北京' },
    { id: '2', country: '美国', capital: '华盛顿' },
    { id: '3', country: '日本', capital: '东京' },
    { id: '4', country: '韩国', capital: '首尔' }
        ];
        $(function () {
            $('#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('');
            });

            //生成表格数据
            $.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').parent().parent().remove();
                }
            });
            //保存
            $('#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());//作用：在修改后用于查找原始数据的行
                           $('#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());//作用：在修改后用于查找原始数据的行
                $('#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>

纯jq编写增删改，弹出框的更多相关文章

  1. jq实现点击弹出框代码

    废话不多说,先贴代码吧 <script> function showBg() { //定义 showBg 函数 var bh = $("body").height(); ...

  2. JQ 确定与取消弹出框，选择确定执行Ajax

    $(function () { $("#GetCoupon").click(function () { function del() { var msg = "请确定领取 ...

  3. 在ASP.NET MVC4中实现同页面增删改查,无弹出框02,增删改查界面设计

    在上一篇"在ASP.NET MVC4中实现同页面增删改查,无弹出框01,Repository的搭建"中,已经搭建好了Repository层,本篇就剩下增删改查的界面了......今 ...

  4. 在ASP.NET MVC4中实现同页面增删改查,无弹出框01,Repository的搭建

    通常,在同一个页面上实现增删改查,会通过弹出框实现异步的添加和修改,这很好.但有些时候,是不希望在页面上弹出框的,我们可能会想到Knockoutjs,它能以MVVM模式实现同一个页面上的增删改查,再辅 ...

  5. 如何使用纯js实现一个带有灰色半透明背景的弹出框

    原文如何使用纯js实现一个带有灰色半透明背景的弹出框 // 加入透明背景 var body = document.body;var backgroundDiv = document.createEle ...

  6. bootstrap弹出框提示框无法调用

    使用bootstrap的js插件真的很好用啊有木有!! 但是第一次使用这个弹出框跟提示框的时候就被打击了,没有反应啊!! 然而这并不是一个大问题,一句话搞定,看代码: //首先是工具提示: $(fun ...

  7. 弹出框JBox实例

    前几天做的考试系统的一些后台弹出框的一些模板.主要是因为普通的弹出框样式不是很好,颜色也不能调换.这里我们用的是JBox,还是从师傅那得知的.自己小实验了下,这里就做个小结. JBox 插件说明 - ...

  8. 四种常见的提示弹出框（success，warning，error，loading）原生JavaScript和jQuery分别实现

    原文:四种常见的提示弹出框(success,warning,error,loading)原生JavaScript和jQuery分别实现 虽然说现在官方的自带插件已经有很多了,但是有时候往往不能满足我们 ...

  9. 如何使用angular-ui的弹出框

    在开发项目时,我们经常性的会遇到弹出框的需求,例如登陆,注册,添加信息等等....面对这一需求,我们当然也可以使用自己的双手进行编写,如果你时间充足可以试试. 今天我们讲解一下如何在angular框架 ...

随机推荐

  1. SOP、DIP、PLCC、TQFP、PQFP、TSOP、BGA封装解释

    1. SOP封装SOP是英文Small Outline Package的缩写,即小外形封装.SOP封装技术由1968-1969年菲利浦公司开发成功,以后逐渐派生出SOJ(J型引脚小外形封装).TSOP ...

  2. 你应该知道的16个Linux服务器监控命令

    在不同的Linux发行版中,会有不同的GUI程序可以显示各种系统信息,比如SUSE Linux发行版中,就有非常棒的图形化的配置和管理工具YaST,KDE桌面环境里的KDE System Guard也 ...

  3. [PoC]某B2B网站的一个反射型XSS漏洞

    Author: Charlie 个人微博:http://YinYongYou.com 转载请注明出处. 工作过程纯粹手贱,测试了一下.然后发现了这么一个东西.有心利用能造成大范围影响.如可以自由修改用 ...

  4. 用 JavaScript 修改样式元素

    利用 <style> 元素,我们可以在网页中嵌入样式表.如果需要动态增加 <style> 元素,似乎可以用如下的 JavaScript 代码: var style = docu ...

  5. InvokeHelper，让跨线程访问/修改主界面控件不再麻烦(转)

    http://bbs.csdn.net/topics/390162519 事实上,本文内容很简单且浅显,所以取消前戏,直接开始.. 源代码:在本文最后 这里是一张动画,演示在多线程(无限循环+Thre ...

  6. 预览Cube出现没有注册类错误

    用Microsoft SQL Server Management Studio预览AS上的Cube 出现如下错误. TITLE: Microsoft SQL Server Management Stu ...

  7. 【转】Android WebRTC 音视频开发总结（一）

    http://www.cnblogs.com/lingyunhu/p/3578218.html 本系列文章主要总结和分享WebRTC开发过程中的一些经验,转载请说明出处(博客园RTC.Blacker) ...

  8. Codeforces GYM 100114 B. Island 水题

    B. Island Time Limit: 1 Sec Memory Limit: 256 MB 题目连接 http://codeforces.com/gym/100114 Description O ...

  9. QProcess调用外部程序方式的差异

    众所周知QProcess类的作用是启动一个外部的程序并与之交互它有三种方式调用外部程序: 1. execute 2. start 3. startDetached 从调用上看: execute是阻塞调 ...

  10. phonegap platform add ios 出错的问题

    在Mac上新安装的Phonegap,版本3.3-0.18.0. 本来创建项目后按教程: http://docs.phonegap.com/en/edge/guide_platforms_ios_ind ...