<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.hidden{
display:none;
}
.modal{
position:fixed;
width:500px;
height:300px;
top: 50%;
left: 50%;
margin-left: -200px;
margin-top: -200px;
background-color: white;
z-index:10;
}
.shadow{
position:fixed;
top: 0;
bottom: 0;
left: 0;
right: 0;
opacity:0.5;
background-color:black;
z-index: 9;
}
</style>
</head>
<body>
<input onclick="add()" type="button" value="添加"/>
<table border="1" width="200px " id="tb">
<tr>
<td target="hostname">1.1.1.1</td>
<td target="port">80</td>
<td target="seq">1</td>
<td>
<a class="edit">编辑</a> | <a class="del">删除</a>
</td>
</tr>
<tr>
<td target="hostname">1.1.1.2</td>
<td target="port">82</td>
<td target="seq">2</td>
<td>
<a id='i2' class="edit">编辑</a> | <a class="del">删除</a>
</td>
</tr>
<tr>
<td target="hostname">1.1.1.3</td>
<td target="port">84</td>
<td target="seq">3</td>
<td>
<a class="edit">编辑</a> | <a class="del">删除</a>
</td>
</tr>
</table>
<div class="modal hidden">
<div>
<input name="hostname" type="text"/>
<input name="port" type="text"/>
<input name="seq" type="text"/>
</div>
<div>
<input type="button" value="取消"/>
</div>
</div>
<div class="shadow hidden"></div>
<script src="jquery-1.12.4.js"></script>
<script>
function add(){
$('.modal,.shadow').removeClass('hidden');
}
//点击edit出现模态框
$('.edit').click(function(){
$('.modal,.shadow').removeClass('hidden');
var tds = $(this).parent().prevAll(); //this:有编辑的a标签;获取到同一个tr下的所有td
tds.each(function(){
var val = $(this).attr('target'); //this :当前td;(作用域,此this不同于上个this) val:当前td的target值
var txt = $(this).text();
$('.modal input[name="' + val + '"]').val(txt); //将内容添加到modal的input框中
})
// var host = $(tds[1]).text(); //tds[1] 会变成dom对象
// var port = $(tds[0]).text();
//将选中编辑的对话框的元素放入到input中
// $("input[name='hostname']").val(host);
// $("input[name='port']").val(port);
})
//点击取消,去除input框中的内容
$('.modal input[value="取消"]').click(function(){
$(".modal input[type='text']").val("");
$('.modal,.shadow').addClass('hidden');
})
</script>
</body>
</html>
jQuery学习笔记---菜单内容切换
最新推荐文章于 2023-12-26 21:16:38 发布