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

随机推荐

[转]内存分配malloc, new , heapalloc
malloc,new,VirtualAlloc,HeapAlloc性能(速度)比较 http://www.cppblog.com/woaidongmao/archive/2011/08/12/1531 ...
第七十四课图的遍历（BFS）
广度优先相当于对顶点进行分层,层次遍历. 在Graph.h中添加BFS函数: #ifndef GRAPH_H #define GRAPH_H #include "Object.h" ...
JavaScript操作符-3---算数，逻辑，赋值，比较，三元
JavaScript操作符学习目标 1.掌握什么是表达式 2.掌握javascript操作符的分类 3.掌握算数操作符什么是表达式将类型的数据(如常量.变量.函数等),用运算符号按一定的规则链接 ...
强化学习中的无模型基于值函数的 Q-Learning 和 Sarsa 学习
强化学习基础: 注: 在强化学习中奖励函数和状态转移函数都是未知的,之所以有已知模型的强化学习解法是指使用采样估计的方式估计出奖励函数和状态转移函数,然后将强化学习问题转换为可以使用动态规划求解的 ...
phpstorm使用zen coding 快速编辑补全html/css代码
百科定义: 使用仿CSS选择器的语法来快速开发HTML和CSS ——由Sergey Chikuyonok开发. Zen Coding由两个核心组件组成:一个缩写扩展器(缩写为像CSS一样的选择器)和上 ...
Linux audit安全审计工具
/********************************************************************** * Linux audit安全审计工具 * 说明: * ...
[LeetCode&Python] Problem 404. Sum of Left Leaves
Find the sum of all left leaves in a given binary tree. Example: 3 / \ 9 20 / \ 15 7 There are two l ...
Tree Recovery
#include<stdio.h> #include<string.h> void build(int n,char*s1,char*s2) { )return ; ])-s2 ...
Django之路由配置系统(urlConfig)
简而言之,django的路由系统作用就是使views里面处理数据的函数与请求的url建立映射关系.使请求到来之后,根据urls.py里的关系条目,去查找到与请求对应的处理方法,从而返回给客户端http ...
Redis怎么保持缓存与数据库一致性？
将不一致分为三种情况: 1. 数据库有数据,缓存没有数据: 2. 数据库有数据,缓存也有数据,数据不相等: 3. 数据库没有数据,缓存有数据. 在讨论这三种情况之前,先说明一下我使用缓存的策略,也是大 ...

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

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

随机推荐

热门专题

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

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