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

随机推荐

linux 编译链接问题
-rpath和-rpath-link 假设有3个文件,在同一目录下,有这样的依赖关系 test->liba.so->libd.so 如果编译test的时候这样写 gcc test.c –l ...
一道DP
也是校赛学长出的一道题~想穿了很简单..但我还是听了学长讲才明白. 观察力有待提高. Problem D: YaoBIG’s extra homeworkTime LimitMemory Limit1 ...
深入理解Java中的多态
一.什么是多态? 多态指同一个实体同时具有多种形式.它是面向对象程序设计(OOP)的一个重要特征.如果一个语言只支持类而不支持多态,只能说明它是基于对象的,而不是面向对象的. 二.多态是如何实现的? ...
HDU 1686：Oulipo（KMP模板，子串出现次数）
Oulipo Time Limit: 3000/1000 MS (Java/Others) Memory Limit: 32768/32768 K (Java/Others) Total Sub ...
eclipse打jar包解决第三方依赖包
在项目根目录下手动MANIFEST.MF(eclipse无法自动生成) MANIFEST.MF Manifest-Version: 1.0 Class-Path: lib/kafka-clients- ...
mvc core2.1 Identity.EntityFramework Core 实例配置 (四）
https://docs.microsoft.com/zh-cn/aspnet/core/security/authentication/customize_identity_model?view=a ...
《DSP using MATLAB》Problem 6.18
代码: %% ++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ %% Output In ...
Maven命令安装jar包到本地仓库
https://blog.csdn.net/moxiong3212/article/details/78767480 当需要的jar包在中央仓库找不到或者是想把自己生成的jar包放到的Maven仓库中 ...
UVA1455 【Kingdom】
分析直线都是$y=\overline{a.5}$这种形式,而只查询州和城市的个数,所以很容易想到对$y$轴做投影,然后转化为区间修改(加减)和单点查询,可以用线段树维护.至于每个州只会合并不 ...
day39机器学习
2 Numpy快速上手 2.1. 什么是Numpy Numpy是Python的一个科学计算的库主要提供矩阵运算的功能,而矩阵运算在机器学习领域应用非常广泛 Numpy一般与Scipy.matplot ...

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

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

随机推荐

热门专题

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

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