jQuery练习 | 模态对话框（添加删除）

<!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练习 | 模态对话框（添加删除）的更多相关文章

为Bootstrap模态对话框添加拖拽移动功能
请自行下载使用到的Bootstrap库及jQuery库 <!DOCTYPE html> <html> <head lang="en"> < ...
jquery综合练习--模态对话框传值,删除,新增表格行
效果示例: 个人的练习代码: <!DOCTYPE html> <html lang="en"> <head> <meta charset= ...
jquery 模态对话框传值,删除,新增表格行
个人的练习代码: <!DOCTYPE html> <html lang="en"> <head> <meta charset=" ...
简单的jquery表单验证+添加+删除+全选/反选
//布局 <body> <h4><a href="#">首页</a>><a href="#"> ...
HTML bootstrap 模态对话框添加用户
HTML 1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf-8"> ...
jquery 学习(四) - 标签添加/删除/修改
HTML代码 <div class="a1"> <div> <span id="a2">aaa</span> & ...
python Django html 一对多数据实例模态对话框添加数据
jQuery查找标签--选择器,筛选器,模态对话框, 左侧菜单栏
查找标签选择器: 基本选择器(同css) id选择器 $("#id") 标签选择器 $('tagName') class选择器 $(".className") ...
jQuery添加删除元素
$(document).ready(function () { $('#radioExtranet').on('click', function () { showProjectInformation ...

随机推荐

关于innerHTML以及html2dom
使用innerHTML或者insertAdjacentHTML 创建元素的时候能给我们带来很大的方便,为domNode 赋予innerHTML 属性,在插入大量的HTML的时候,使用innerHTML ...
vim command
问题:对多行缩进简述:向左缩是<,向右缩是> 详述:在命令状态,按v进入visual状态,选中多行,再按>,相当于一个TAB键:再选中多行,按<试试 ------------ ...
Java == 和 equals 比较
在初学Java时,可能会经常碰到下面的代码: 1 String str1 = new String("hello"); 2 String str2 = new String(&qu ...
Transaction And Lock--由Lookup导致的死锁情况
存在这样情况:1.表TB1有一列建立索引2.事务A对表进行更新,先获取对表的X锁以更新基本表中数据,然后对索引申请X锁以更新索引数据.3.事务B对表进行更新,先获取索引上S锁以使用索引进行Loopup ...
pycharm中使用git
注册GitHub https://www.jb51.net/article/135606.htm pycharm中配置git https://www.cnblogs.com/feixuelove100 ...
ZKEACMS 自定义表单的使用
ZKEACMS Core 2.2 已经发布了,其中主要添加了自定义表单的功能.使用自定义表单的功能,您可以在几分钟内就创建一个表单,并用它来收集一些信息.导出收集的信息,就可以做一些统计分析. 创建表 ...
Django Meta
Available Meta options abstract 如果为True,这个model就是抽象类 app_label 如果模型是在INSTALLED_APPS中的应用程序之外定义的,它必须声明 ...
WEB新手之签到题
写一写web新手赛的题. 这是签到题,开始时需要耐心等待页面中字母全部出现. 字母全部出现后,会跳转到另一个界面,如上图所示.F12没什么特别的地方,这题应该有点难度. 按往常一样,先抓包. 按英文提 ...
scrapy框架基于CrawlSpider的全站数据爬取
引入提问:如果想要通过爬虫程序去爬取”糗百“全站数据新闻数据的话,有几种实现方法? 方法一:基于Scrapy框架中的Spider的递归爬取进行实现(Request模块递归回调parse方法). 方法 ...
1.Java Spring MVC入门安装
Spring 下载地址: 4.3.6.RELEASE/ 25-Jan-2017 14:05 - http://repo.spring.io/release/org/springframework/sp ...

jQuery练习 | 模态对话框（添加删除）

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

随机推荐

热门专题