jQuery模态框实现后台添加删除修改Ip端口

主要用到，$('#i1').each(),标签里绑定函数可传参数this

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

    <style>

        .hide{

            display: none;

        }

        .zhezhao{

            z-index: 99;

            position: fixed;

            top: 0;

            bottom: 0;

            left: 0;

            right: 0;

            background-color: black;

            opacity: 0.6;

        }

        .motai{

            width: 500px;

            height: 300px;

            position: fixed;

            background-color: white;

            left: 50%;

            top: 50%;

            margin-left: -250px;

            margin-top: -150px;

            z-index: 100;

        }

    </style>

</head>

<body>

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

<div class="motai hide">

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

        <thead><tr><th>IP</th><th>端口</th><th>操作</th></tr></thead>

        <tr><td><input target="ip" type="text" value=""></td><td><input target="port" type="text" value=""></td><td><a id="submit">确定</a>|<a id="cancel">取消</a></td></tr>

    </table>

</div>

<div style="margin: 0 auto;width: 500px;height: 800px;">

<input type="button" value="添加" onclick="addTr();"/>

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

    <thead>

        <tr><th>选择</th><th>IP</th><th>端口</th><th>操作</th></tr>

    </thead>

    <tbody>

        <tr><td target="checkbox"><input type="checkbox"/></td><td target="ip">1.1.1.1</td><td target="port">80</td><td><a target="modify" onclick="modifyTr(this)">编辑</a>|<a target="del" onclick="delTr(this)">删除</a></td></tr>

        <tr><td target="checkbox"><input type="checkbox"/></td><td target="ip">1.1.1.2</td><td target="port">81</td><td><a target="modify" onclick="modifyTr(this)">编辑</a>|<a target="del" onclick="delTr(this)">删除</a></td></tr>

        <tr><td target="checkbox"><input type="checkbox"/></td><td target="ip">1.1.1.3</td><td target="port">82</td><td><a target="modify" onclick="modifyTr(this)">编辑</a>|<a target="del" onclick="delTr(this)">删除</a></td></tr>

        <tr><td target="checkbox"><input type="checkbox"/></td><td target="ip">1.1.1.4</td><td target="port">83</td><td><a target="modify" onclick="modifyTr(this)">编辑</a>|<a target="del" onclick="delTr(this)">删除</a></td></tr>

    </tbody>

</table>

</div>

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

<script>

    function addTr() {

        $('.zhezhao,.motai').removeClass('hide');

        index = -1;  //标签为空时，模态框提交是新增

    }

    function modifyTr(self) {

        $('.zhezhao,.motai').removeClass('hide');

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

        index = $(self).parent().parent().index(); //记录当前索引，方便修改后提交调用

        tds.each(function () {

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

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

            console.log(target,value);

            $('#tb2 input[target="'+target+'"]').val(value);

        }); //  以上函数，实现按表格列数里的属性target来对应弹出的模态框表格target,依次到tds里的值去填tb2上对应的框

    }

    function delTr(self) {

        $(self).parent().parent().remove();

    }

    $('#tb2 #submit').click(function () {

        var ip = $('#tb2 input[target="ip"]').val();

        var port = $('#tb2 input[target="port"]').val();

        if(index != -1){

            $('#tb1 td[target="ip"]').eq(index).text(ip);

            $('#tb1 td[target="port"]').eq(index).text(port);

        }else {

            var tag = '<tr><td target="checkbox"><input type="checkbox"/></td><td target="ip">'+ip+'</td><td target="port">'+port+'</td><td><a target="modify" onclick="modifyTr(this)">编辑</a>|<a target="del" onclick="delTr(this)">删除</a></td></tr>'

            $('#tb1 tbody').append(tag);

        }

        $('.motai,.zhezhao').addClass('hide');

    });

    $('#tb2 #cancel').click(function () {

        $('.zhezhao').addClass('hide');

        $('.motai').addClass('hide');

    });

</script>

</body>

</html>

jQuery模态框实现后台添加删除修改Ip端口的更多相关文章

SQL语句添加删除修改字段及一些表与字段的基本操作
用SQL语句添加删除修改字段 1.增加字段 alter table docdsp add dspcode char(200)2.删除字段 ALTER TABLE table_NA ...
Entity framework 绑定到Datagridview的添加删除修改
Entity framework 绑定到Datagridview的添加删除修改 using System; using System.Collections.Generic; using System ...
JavaScript学习 - 基础(八) - DOM 节点添加/删除/修改/属性值操作
html代码:  <div id="a1"> <button id="a2" onclick=&q ...
JTree 添加 , 删除, 修改
package com.swing.demo; import java.awt.BorderLayout; import java.awt.Container; import java.awt.eve ...
用SQL语句添加删除修改字段、一些表与字段的基本操作、数据库备份等
用SQL语句添加删除修改字段 1.增加字段 alter table docdsp add dspcode char(200) 2.删除字段 ALTER TABLE table_NAME DROP CO ...
SQL语句添加删除修改字段[sql server 2000/2005]
用SQL语句添加删除修改字段1.增加字段 alter table docdsp add dspcodechar(200)2.删除字段 ALTER TABLE table_NAME ...
SQL语句添加删除修改字段
用SQL语句添加删除修改字段1.增加字段 alter table docdsp add dspcodechar(200)2.删除字段 ALTER TABLE table_NAME ...
Dom4j 操作，节点查找添加删除修改。。。xPath
转: Dom4j 操作, 节点查找添加删除修改 ...xPath 2013年11月28日 10:48:59 今晚打酱油8 阅读数:8506更多个人分类: JavaWeb 版权声明:本文为博 ...
dir（dict）|字典的创建-添加-删除-修改-判断存在-取值等相关操作
dir(dict) ####字典操作:创建-添加-删除-修改-判断存在-取值 #(一)创建字典: {} .等号. zip(). [(),()] #1.创建空字典 dict0 = {} #2.等号创建 ...

随机推荐

TEST mathjax
这里是第一个公式 $ F = ma^2 $ \[ \text{Reinforcement Learning} \doteq \pi_* \\ \quad \updownarrow \\ \pi_* \ ...
20165228 2017-2018-2 《Java程序设计》第6周学习总结
20165228 2017-2018-2 <Java程序设计>第6周学习总结教材学习内容总结 String类用来处理字符序列及其用法 StringTokenizer对象及类的使用 Sca ...
render finished
51Nod 1459：迷宫游戏（最短路）
1459 迷宫游戏基准时间限制:1 秒空间限制:131072 KB 分值: 0 难度:基础题收藏关注你来到一个迷宫前.该迷宫由若干个房间组成,每个房间都有一个得分,第一次进入这个房间, ...
Codeforces 520B：Two Buttons（思维，好题）
题目链接:http://codeforces.com/problemset/problem/520/B 题意给出两个数n和m,n每次只能进行乘2或者减1的操作,问n至少经过多少次变换后能变成m 思路 ...
php 函数集锦
1.array_intersect_assoc()用于比较两个(或更多个)数组的键名和键值,并返回交集. <?php $a1=array("a"=>"red& ...
Hive错误：User root is not allowed to impersonate anonymous
修改hadoop 配置文件 etc/hadoop/core-site.xml,加入如下配置项: <property> <name>hadoop.proxyuser.root.h ...
基于PaaS和SaaS研发平台体系
基于PaaS和SaaS研发的商业云平台实战背景介绍 SaaS.PaaS.IaaS等云服务模式已经被大家普遍认可,在研发过程中借力一些PaaS和SaaS平台,能够提升产品的研发速度和功能稳定程度.本文 ...
manjaro运行virtualbox报错
manjaro运行virtualbox报错manjaro使用添加删除程序搜索virtualbox安装后运行报错, 安装过程有选择modules的过程(这里要选择匹配当前系统内核的版本),当时不了解是干 ...
MBR, EFI, 硬盘分区表
文章目录硬盘MBR详细介绍结束柱面号(End cylinder)超过1023时怎么处理 grub stage 1 是如何引导grub stage 2 的 MBR和2TB的限制 (MBR/GPT/E ...

jQuery模态框实现 后台添加删除修改Ip端口

jQuery模态框实现 后台添加删除修改Ip端口的更多相关文章

随机推荐

热门专题

jQuery模态框实现后台添加删除修改Ip端口

jQuery模态框实现后台添加删除修改Ip端口的更多相关文章