<!DOCTYPE html>
<html lange="en"> <!-- 设置语音 -->
<head>
<meta charset="UFT-8"> <!-- 设置编码格式 -->
<title>Title</title>
<style>
.hide{
display:none;
}
.modal{
position:fixed;
top:50%;
left:50%;
margin-left:-250px;
margin-top:-250px;
background-color:#dddddd;
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 οnclick="addElement();">添加</a>
<table border="1" id="tb">
<tr>
<td target="hostname">192.168.0.1</td>
<td target="port">80</td>
<td target="ip">1.1.1.1</td>
<td>
<a class="edit">编辑</a> | <a class="del">删除</a>
</td>
</tr>
<tr>
<td target="hostname">192.168.0.2</td>
<td target="port">82</td>
<td target="ip">1.1.1.2</td>
<td>
<a class="edit">编辑</a> | <a class="del">删除</a>
</td>
</tr>
<tr>
<td target="hostname">192.168.0.3</td>
<td target="port">83</td>
<td target="ip">1.1.1.3</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="取消" οnclick="cancelModal()" />
<input type="button" value="确定" οnclick="confirmModal()" />
</div>
</div>
<div class="shadow hide"></div>
<script src="jquery-1.12.4.js"></script>
<script>
function addElement(){
$(".modal,.show").removeClass('hide');
}
function cancelModal(){
$(".modal,.shadow").addClass('hide');
$(".model input[type='name']").val("");
}
$(".edit").click(function (){
/*
//方法一
$(".modal,.shadow").removeClass("hide");
var tds = $(this).parent().prevAll();
var port = $(tds[1]).text();
var host = $(tds[0]).text();
console.log(tds);
console.log(port);
console.log(host);
$('.modal input[name="hostname"]').val(host);
$('.modal input[name="port"]').val(port);
*/
//方法二：
$(".modal,.shadow").removeClass("hide");
var tds = $(this).parent().prevAll();
tds.each(function () {
var n = $(this).attr('target');
var text = $(this).text();
console.log(n);
console.log(text);
var a1 = '.modal input[name="';
var a2 = '"]';
var temp = a1 + n +a2;
$(temp).val(text);
})
})
</script>
</body>
</html>
<html lange="en"> <!-- 设置语音 -->
<head>
<meta charset="UFT-8"> <!-- 设置编码格式 -->
<title>Title</title>
<style>
.hide{
display:none;
}
.modal{
position:fixed;
top:50%;
left:50%;
margin-left:-250px;
margin-top:-250px;
background-color:#dddddd;
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 οnclick="addElement();">添加</a>
<table border="1" id="tb">
<tr>
<td target="hostname">192.168.0.1</td>
<td target="port">80</td>
<td target="ip">1.1.1.1</td>
<td>
<a class="edit">编辑</a> | <a class="del">删除</a>
</td>
</tr>
<tr>
<td target="hostname">192.168.0.2</td>
<td target="port">82</td>
<td target="ip">1.1.1.2</td>
<td>
<a class="edit">编辑</a> | <a class="del">删除</a>
</td>
</tr>
<tr>
<td target="hostname">192.168.0.3</td>
<td target="port">83</td>
<td target="ip">1.1.1.3</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="取消" οnclick="cancelModal()" />
<input type="button" value="确定" οnclick="confirmModal()" />
</div>
</div>
<div class="shadow hide"></div>
<script src="jquery-1.12.4.js"></script>
<script>
function addElement(){
$(".modal,.show").removeClass('hide');
}
function cancelModal(){
$(".modal,.shadow").addClass('hide');
$(".model input[type='name']").val("");
}
$(".edit").click(function (){
/*
//方法一
$(".modal,.shadow").removeClass("hide");
var tds = $(this).parent().prevAll();
var port = $(tds[1]).text();
var host = $(tds[0]).text();
console.log(tds);
console.log(port);
console.log(host);
$('.modal input[name="hostname"]').val(host);
$('.modal input[name="port"]').val(port);
*/
//方法二：
$(".modal,.shadow").removeClass("hide");
var tds = $(this).parent().prevAll();
tds.each(function () {
var n = $(this).attr('target');
var text = $(this).text();
console.log(n);
console.log(text);
var a1 = '.modal input[name="';
var a2 = '"]';
var temp = a1 + n +a2;
$(temp).val(text);
})
})
</script>
</body>
</html>
3180
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
