<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

    <style>

        .hide{

            display: none;

        }

        .modal{

            position: fixed;

            top: 50%;

            left: 50%;

            width: 500px;

            height: 400px;

            margin-left: -250px;

            margin-top: -250px;

            background-color: #eeeeee;

            z-index: 10;

        }

        .shadow{

            position: fixed;

            top: 0;

            left: 0;

            right: 0;

            bottom: 0;

            opacity: 0.6;

            background-color: black;

            z-index: 9;

        }

    </style>

</head>

<body>

    <a onclick="addElement();">添加</a>

    <table border="1" id="tb">

        <tr>

            <td target="hostname">1.1.1.11</td>

            <td target="port">80</td>

            <td target="ip">80</td>

            <td>

                <a class="edit">编辑</a> | <a class="del">删除</a>

            </td>

        </tr>

        <tr>

            <td target="hostname">1.1.1.12</td>

            <td target="port">80</td>

            <td target="ip">80</td>

            <td>

                <a class="edit">编辑</a> | <a class="del">删除</a>

            </td>

        </tr>

        <tr>

            <td target="hostname">1.1.1.13</td>

            <td target="port">80</td>

            <td target="ip">80</td>

            <td>

                <a class="edit">编辑</a> | <a class="del">删除</a>

            </td>

        </tr>

        <tr>

            <td target="hostname">1.1.1.14</td>

            <td target="port">80</td>

            <td target="ip">80</td>

            <td>

                <a class="edit">编辑</a> | <a class="del">删除</a>

            </td>

        </tr>

    </table>

    <div class="modal hide">

        <div>

            <input name="hostname" type="text"  />

            <input name="port" type="text" />

            <input name="ip" type="text" />

        </div>

        <div>

            <input type="button" value="取消" onclick="cancelModal();" />

            <input type="button" value="确定" onclick="confirmModal();" />

        </div>

    </div>

    <div class="shadow hide"></div>

    <script src="jquery-1.12.4.js"></script>

    <script>

        $('.del').click(function () {   //删除事件：匹配到标签并删除掉此标签

            $(this).parent().parent().remove();

        });

        function  confirmModal() {   //确认按钮：添加数据到表格

            var tr = document.createElement('tr');

            var td1 = document.createElement('td');

            td1.innerHTML = "11.11.11.11";

            var td2 = document.createElement('td');

            td2.innerHTML = "8001";

            $(tr).append(td1);

            $(tr).append(td2);

            $('#tb').append(tr);

            $(".modal,.shadow").addClass('hide');

//            $('.modal input[type="text"]').each(function () {

//                // var temp = "<td>..."

//

//

//

//            })

        }

        function  addElement() {   //添加按钮：显示模态对话框

            $(".modal,.shadow").removeClass('hide');

        }

        function cancelModal() {   //取消按钮：取消模态对话框

            $(".modal,.shadow").addClass('hide');

            $('.modal input[type="text"]').val("");   //取消模态对话框时重置value值

        }

        $('.edit').click(function(){   //编辑按钮：显示模态对话框并读取当前数据到Input

            $(".modal,.shadow").removeClass('hide');

            // this

            // 思路：

            // 循环获取tds中内容

            // 获取 <td>内容</td> 获取中间的内容

            // 赋值给input标签中的value

            /*方法一：

              var port = $(tds[0]).text();

              var host = $(tds[1]).text();

              $('.modal input[name="hostname"]').val(host);

              $('.modal input[name="port"]').val(port);

            */

            //方法二：

            var tds = $(this).parent().prevAll();

            tds.each(function () {

                // 获取td的target属性值

                var n = $(this).attr('target');

                // 获取td中的内容

                var text = $(this).text();

                var temp = '.modal input[name="' + n + '"]';

                $(temp).val(text);  //字符串拼接中用$方法查找变量n对应input赋值

            });

        });

    </script>

</body>

</html>

jQuery练习 | 模态对话框（添加删除）的更多相关文章

  1. 为Bootstrap模态对话框添加拖拽移动功能

    请自行下载使用到的Bootstrap库及jQuery库 <!DOCTYPE html> <html> <head lang="en"> < ...

  2. jquery综合练习--模态对话框传值,删除,新增表格行

    效果示例: 个人的练习代码: <!DOCTYPE html> <html lang="en"> <head> <meta charset= ...

  3. jquery 模态对话框传值,删除,新增表格行

    个人的练习代码: <!DOCTYPE html> <html lang="en"> <head> <meta charset=" ...

  4. 简单的jquery表单验证+添加+删除+全选/反选

    //布局 <body> <h4><a href="#">首页</a>><a href="#"> ...

  5. HTML bootstrap 模态对话框添加用户

    HTML 1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf-8"> ...

  6. jquery 学习(四) - 标签 添加/删除/修改

    HTML代码 <div class="a1"> <div> <span id="a2">aaa</span> & ...

  7. python Django html 一对多数据实例 模态对话框添加数据

  8. jQuery查找标签--选择器,筛选器,模态对话框, 左侧菜单栏

    查找标签 选择器: 基本选择器(同css) id选择器 $("#id") 标签选择器 $('tagName') class选择器 $(".className") ...

  9. jQuery添加删除元素

    $(document).ready(function () { $('#radioExtranet').on('click', function () { showProjectInformation ...

随机推荐

  1. eclipse 导出可执行jar文件

    step1: step2: step3: 结果: E:\executable\META-INF\MANIFEST.MF Manifest-Version: 1.0 Main-Class: cn.zno ...

  2. linux安装x264 ffmpeg

    1. 安装yasm 2. 安装x264 3. 安装ffmpeg 安装网上很多例子,以下是我主要参考的两篇博客: http://www.cnblogs.com/lidabo/p/3987378.html ...

  3. Android R文件的id

    如果你用 apktoool 反编译过 apk 就知道,反编译后res/values 下有一个 public.xml 文件,内容如图     这个东西有什么用呢?   先从如何使用资源 ID 开始,在开 ...

  4. POJ 3581 Sequence(后缀数组）

    Description Given a sequence, {A1, A2, ..., An} which is guaranteed A1 > A2, ..., An,  you are to ...

  5. CSS中的一些内容总结

    一.选择器 1.选择器的分组:一个Style可以对多个选择器生效,只用在不同的选择器中间加入逗号即可.如: h1,h2,h3,h4,h5,h6 { color: green; } PS:CSS规定,所 ...

  6. Knockoutjs+select2 人员搜索

    HTML: <select class="form-control PersonEmail" id="txtProjectManager" data-bi ...

  7. table.insert(tableName, v)

    self.teammateList = {} for i=1,3 do local teammate = UI.CreateLuaWidget("Widget_TeammateInfo&qu ...

  8. 度度熊想去商场买一顶帽子，商场里有N顶帽子，有些帽子的价格可能相同。度度熊想买一顶价格第三便宜的帽子，问第三便宜的帽子价格是多少？

    var data=[10,25,50,10,20,80,30,30,40,90]; function fun(arr,index){ var min=Math.min.apply(this,arr); ...

  9. SQLite Mysql 模糊查找（like）

    select UserId,UserName,Name,Sex,Birthday,Height,Weight,Role from xqhit_Users where UserName like &qu ...

  10. python学习之路 六 ：装饰器

    本节重点: 掌握装饰器相关知识 ​ python装饰器就是用于拓展原来函数功能的一种函数,这个函数的特殊之处在于它的返回值也是一个函数,使用python装饰器的好处就是在不用更改原函数的代码前提下给函 ...