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.等号创建 ...

随机推荐

PHPweb应用攻击总结（转）
XSS跨站脚本概念:恶意攻击者往Web页面里插入恶意html代码,当用户浏览该页之时,嵌入其中Web里面的html代码会被执行,从而达到恶意用户的特殊目的. 危害: 盗取用户COOKIE信息. 跳转 ...
JsonWebToken
概述如果各位不了解 JWT,不要紧张,它并不可怕. JSON Web Token(JWT)是一个非常轻巧的规范.这个规范允许我们使用JWT在用户和服务器之间传递安全可靠的信息. 让我们来假想一下一个 ...
EtherNet/IP 基本信息
/********************************************************************************* * EtherNet/IP 基本信 ...
Skflow mac安装 for tensorflow-0.8.0
参考: # Mac OS X, CPU only: $ pip install --ignore-installed --upgrade https://storage.googleapis.com/ ...
s21day04 python笔记
s21day04 python笔记一.上周知识回顾及补充回顾补充编译型语言和解释性语言编译型:代码写完后,编译器将其变成成另外一个文件,然后交给计算机执行常见的编译型语言:C,C++,Ja ...
lesson4Embedding-fastai
dense layer:mnist识别中,需要十组dense权重矩阵来计算这十个输出内容,conv矩阵每一个元素乘以另一个矩阵的元素并相加,得到一个值,最后加上sigmoid(softmax在二元情况 ...
（2）MySQL的增删改查基本操作
数据库增删改查的基本操作(数据文件在data目录下) 数据库的专业术语 1.文件夹:数据库 2.文件:数据表指令的注意事项 1.用use的时候指令结尾不需要跟一个分号 ‘:’ 2.如果用show或其 ...
hdu3294 Girls' research manacher
One day, sailormoon girls are so delighted that they intend to research about palindromic strings. O ...
进程的环境变量environ
编程之路刚刚开始,错误难免,希望大家能够指出. 每个进程都有自己的环境变量,在C语言程序中可使用外部变量(char **environ)来访问环境,而库函数可允许进程去获取或修改自己环境的值. 两种方 ...
day3 zookeeper
PS:在生产的场景中,一般有两个需求:1.提供设备的注册 2.对所注册的接口进行监听.zookeeper就是提供这样的功能,它本身就是一个集群,如果存在半数以上的节点活着就能提供服务,本身就具备很高的 ...

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

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

随机推荐

热门专题

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

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