jQuery练习 | 模态对话框（添加删除）
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.hide{
display: none;
}
.modal{
position: fixed;
top: 50%;
left: 50%;
width: 500px;
height: 400px;
margin-left: -250px;
margin-top: -250px;
background-color: #eeeeee;
z-index: 10;
}
.shadow{
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
opacity: 0.6;
background-color: black;
z-index: 9;
}
</style>
</head>
<body>
<a onclick="addElement();">添加</a>
<table border="1" id="tb">
<tr>
<td target="hostname">1.1.1.11</td>
<td target="port">80</td>
<td target="ip">80</td>
<td>
<a class="edit">编辑</a> | <a class="del">删除</a>
</td>
</tr>
<tr>
<td target="hostname">1.1.1.12</td>
<td target="port">80</td>
<td target="ip">80</td>
<td>
<a class="edit">编辑</a> | <a class="del">删除</a>
</td>
</tr>
<tr>
<td target="hostname">1.1.1.13</td>
<td target="port">80</td>
<td target="ip">80</td>
<td>
<a class="edit">编辑</a> | <a class="del">删除</a>
</td>
</tr>
<tr>
<td target="hostname">1.1.1.14</td>
<td target="port">80</td>
<td target="ip">80</td>
<td>
<a class="edit">编辑</a> | <a class="del">删除</a>
</td>
</tr>
</table>
<div class="modal hide">
<div>
<input name="hostname" type="text" />
<input name="port" type="text" />
<input name="ip" type="text" />
</div>
<div>
<input type="button" value="取消" onclick="cancelModal();" />
<input type="button" value="确定" onclick="confirmModal();" />
</div>
</div>
<div class="shadow hide"></div>
<script src="jquery-1.12.4.js"></script>
<script>
$('.del').click(function () { //删除事件：匹配到标签并删除掉此标签
$(this).parent().parent().remove();
});
function confirmModal() { //确认按钮：添加数据到表格
var tr = document.createElement('tr');
var td1 = document.createElement('td');
td1.innerHTML = "11.11.11.11";
var td2 = document.createElement('td');
td2.innerHTML = "8001";
$(tr).append(td1);
$(tr).append(td2);
$('#tb').append(tr);
$(".modal,.shadow").addClass('hide');
// $('.modal input[type="text"]').each(function () {
// // var temp = "<td>..."
//
//
//
// })
}
function addElement() { //添加按钮：显示模态对话框
$(".modal,.shadow").removeClass('hide');
}
function cancelModal() { //取消按钮：取消模态对话框
$(".modal,.shadow").addClass('hide');
$('.modal input[type="text"]').val(""); //取消模态对话框时重置value值
}
$('.edit').click(function(){ //编辑按钮：显示模态对话框并读取当前数据到Input
$(".modal,.shadow").removeClass('hide');
// this
// 思路：
// 循环获取tds中内容
// 获取 <td>内容</td> 获取中间的内容
// 赋值给input标签中的value
/*方法一：
var port = $(tds[0]).text();
var host = $(tds[1]).text();
$('.modal input[name="hostname"]').val(host);
$('.modal input[name="port"]').val(port);
*/
//方法二：
var tds = $(this).parent().prevAll();
tds.each(function () {
// 获取td的target属性值
var n = $(this).attr('target');
// 获取td中的内容
var text = $(this).text();
var temp = '.modal input[name="' + n + '"]';
$(temp).val(text); //字符串拼接中用$方法查找变量n对应input赋值
});
});
</script>
</body>
</html>
jQuery练习 | 模态对话框（添加删除）的更多相关文章
- 为Bootstrap模态对话框添加拖拽移动功能
请自行下载使用到的Bootstrap库及jQuery库 <!DOCTYPE html> <html> <head lang="en"> < ...
- jquery综合练习--模态对话框传值,删除,新增表格行
效果示例: 个人的练习代码: <!DOCTYPE html> <html lang="en"> <head> <meta charset= ...
- jquery 模态对话框传值,删除,新增表格行
个人的练习代码: <!DOCTYPE html> <html lang="en"> <head> <meta charset=" ...
- 简单的jquery表单验证+添加+删除+全选/反选
//布局 <body> <h4><a href="#">首页</a>><a href="#"> ...
- HTML bootstrap 模态对话框添加用户
HTML 1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf-8"> ...
- jquery 学习(四) - 标签 添加/删除/修改
HTML代码 <div class="a1"> <div> <span id="a2">aaa</span> & ...
- python Django html 一对多数据实例 模态对话框添加数据
- jQuery查找标签--选择器,筛选器,模态对话框, 左侧菜单栏
查找标签 选择器: 基本选择器(同css) id选择器 $("#id") 标签选择器 $('tagName') class选择器 $(".className") ...
- jQuery添加删除元素
$(document).ready(function () { $('#radioExtranet').on('click', function () { showProjectInformation ...
随机推荐
- 编写高质量代码改善C#程序的157个建议——建议120：为程序集指定强名称
建议120:为程序集指定强名称 虽然强名称在设计之初有防止被未授权的第三方软件非法执行程序的作用,但是因为它的破解方法并不难,所以现在强名称更多的意义在于它可以避免出现“DLL HELL”现象. “D ...
- ListControl的用法
ListControl 控件可在窗体中管理和显示列 表项.可控制列表内容的显示方式,能够以图标和表格的形式显示数据.打开ListControl控件的属性窗口,在Styles选项卡中的View属性中 可 ...
- Application.DoEvent和定时刷新控件
我们写一个textbox,让其依循环递增,但每次都会出现假死现象,等循环结束后,变为最终值.今天总结一下: private void button3_Click(object sender, Even ...
- [转载].NET开发常用的10条实用代码
1.读取操作系统和CLR的版本 OperatingSystem os = System.Environment.OSVersion; Console.WriteLine(“Platform: {0}” ...
- [Asp.net Mvc]为js,css静态文件添加版本号
方式一: 思路 string version = ViewBag.Version; @Scripts.RenderFormat("<script type=\"text/ja ...
- coderfoces D. Gourmet choice
D. Gourmet choice time limit per test 2 seconds memory limit per test 256 megabytes 题目链接: https: ...
- Selenium爬取元素下子元素方法
Selenium提供了一下方法来定义一个页面中的元素: find_element_by_id find_element_by_name find_element_by_xpath find_eleme ...
- 洛谷P3588 [POI2015]PUS（线段树优化建图）
题面 传送门 题解 先考虑暴力怎么做,我们把所有\(r-l+1-k\)中的点向\(x\)连有向边,表示\(x\)必须比它们大,那么如果这张图有环显然就无解了,否则的话我们跑一个多源最短路,每个点的\( ...
- 模拟实现STL库
最近在复习STL,感觉再看的时候比刚开始学的时候通透很多.以前模拟实现了一个STL库,最近复习完又重构了一遍.代码放出来以供后面学习.如果有写的不好的地方欢迎大家批评指正. STL_List.h #p ...
- android开发如何获取res/raw和assets文件夹的路径
---恢复内容开始--- android开发如何获取res/raw和assets文件夹的路径,主要分为两种情况: 1.如果你只是拷贝动作,那么你只需要得到res/raw和assets文件输入流就可以, ...