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.等号创建 ...
随机推荐
- thinkphp5.0自定义验证器
虽然我早就会些php基础语法,我套过数据,自己写的控制器层,不是用的api方式,那个公司是为了锻炼我,所以才那样做的,基本上的东西都是用的框架自带的,重来自己没有去封装过这些东西,所以编程思想上,还很 ...
- 关于PHP程序员技术职业生涯规划[转]
看到很多PHP程序员职业规划的文章,都是直接上来就提Linux.PHP.MySQL.Nginx.Redis.Memcache.jQuery这些,然后就直接上手搭环境.做项目,中级就是学习各种PHP框架 ...
- 20155219实践题目实现od命令
实践题目 编写MyOD.c 用myod XXX实现Linux下od -tx -tc XXX的功能 od的功能: od命令用于将指定文件内容以八进制.十进制.十六进制.浮点格式或ASCII编码字符方式显 ...
- German Collegiate Programming Contest 2013-B：Booking（贪心）
Booking Pierre is in great trouble today! He is responsible for managing the bookings for the AC ...
- ios-计算时间方法
-(NSString *)countPublishTime:(NSString *)sDate { NSDate *dtNow = [NSDate date]; NSDateFormatter *da ...
- 【liunx】sftp常用命令
sftp是Secure FileTransferProtocol的缩写,安全文件传送协议.可以为传输文件提供一种安全的加密方法.sftp与 ftp有着几乎一样的语法和功能.SFTP为 SSH的一部分, ...
- mongodb副本集加分片集群安全认证使用账号密码登录
mongodb副本集加分片集群搭建网上资料有很多.粘贴一个写的比较好的.副本集加分片搭建 对于搭建好的mongodb副本集加分片集群,为了安全,启动安全认证,使用账号密码登录. 默认的mongodb是 ...
- centos7之zabbix入门（一）
初始化状态如下 首先按照下面的步骤进行,主机名和可见名可以自己起,dns那里最好也填一下,其它默认就可以了 点击确认后,自动跳转到以下页面 可以看到zbx那里没有亮起来,说明还没有配置成功,接下来点击 ...
- MySQL Lock--INSERT加锁规则
Insert操作加锁规则 1.INSERT操作会对新插入的记录加行锁(ROW LOCK)+排他锁(X LOCK),不会产生任何GAP锁和Next-Key锁 2.在插入记录前,会向插入记录所在位置申请意 ...
- day 52 js学习 DOM 和BOM
前戏 到目前为止,我们已经学过了JavaScript的一些简单的语法.但是这些简单的语法,并没有和浏览器有任何交互. 也就是我们还不能制作一些我们经常看到的网页的一些交互,我们需要继续学习BOM和DO ...