溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
在日常開發中難免會對一個對話框進行編輯、修改方面的操作，示例代碼如下:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<input type="button" />
<table border="1">
<thead></thead>
<tbody>
<tr>
<td>11</td>
<td>22</td>
<td>33</td>
<td onclick="GetPrev(this);">編輯</td>
</tr>
<!--
1、彈出框(默認情況下彈出框應該是存在的，默認只是處于隱藏狀態)
2、取出表格數據
3、將數據填充到彈出框
-->
<tr>
<td>111</td>
<td>222</td>
<td>333</td>
<td onclick="GetPrev(this);">編輯</td>
</tr>
<tr>
<td>1111</td>
<td>2222</td>
<td>3333</td>
<td onclick="GetPrev(this);">編輯</td>
</tr>
</tbody>
</table>
<style>
.modal{
position:fixed;
left:50%;
top:50%;
width: 400px;
height: 300px;
background-color:#ddd;
margin-left: -200px; /* -200表示往左移動200像素，如果是200則表示向右邊移動200像素 */
margin-top: -150px; /*-150表示向上移動150像素*/
}
.hide{
display: none;
}
</style>
<div id ="dialog" class="modal hide">
<form action="" method="get">
<p>主機名:<input type="text" id="hostname" /></p>
<p>IP地址:<input type="text" id="ip" /></p>
<p>端口號:<input type="text" id="port" /></p>
<input type="submit" SubmitForm()" value="提交">
<input type="button" value="取消">
</form>
</div>
<script src="jquery-3.1.0.min.js" type="text/javascript"></script>
<script type="text/javascript">
/*
編輯當前行,其中函數GetPrev(ths)中的ths是形式參數，這里可以用arg或者a代替
*/
function GetPrev(ths){
/*
<td>1</td>
<td>2</td>
<td>3</td>
*/
//$(ths).prevAll() 獲取所有的數據
//循環所有數據，取出每個（行）數據的內容
//實例參考列表a和字典d的操作
//var a = [11,22,33,44];
//$.each(a,function(item){
//each的功能就是用來做循環的
// console.log(a[item]);
// });
//var d = {'k1':'v1','k2':'v2'};
//$.each(d, function (key, vale) {
// console.log(key,vale)
//});
// 定義一個空列表list
var list = [];
$.each($(ths).prevAll(), function (i) {
//獲取是所有元素的索引
//console.log(i)
//如果想獲取所有的數據則可以
//console.log($(ths).prevAll()[i]);
//獲取所有的內容除去樣式標簽，比如<p></p>等，則可以
console.log($($(ths).prevAll()[i]).text());
//上面一句等價于下面兩行
var item = $(ths).prevAll()[i];
var text = $(item).text();
list.push(text);
});
//console.log(list);
var new_list = list.reverse();
console.log(new_list);
// val表示input標簽里輸入的值
// $('#hostname').val(new_list[0]);
// console.log($('#hostname').val());獲取input標簽里hostname的value值，
// 這里默認value沒有寫，是通過input輸入獲取的，所以val()的括號中沒有寫入值，就表示獲取當前的值，
// 如果寫了值，比如val('test')則表示用括號里的值(test)修改原來的值
$('#ip').val(new_list[1]);
$('#port').val(new_list[2]);
$('#hostname').val(new_list[1]);
$('#dialog').removeClass('hide');
}
function Cancel(){
$("#dialog").addClass('hide')
}
function Toggle(){
// 引用hide樣式
$("#dialog").toggleClass('hide');
}
function SubmitForm(){
//獲取form表單中的input的值
//判斷值是否為空
var ret = true;
//遍歷所有的input，只要有空值就將ret重置為false
//$('input[type="text"]') input中查找type=text
$(':text').each(function(){
//$(this) ==要循環的每一個元素，即每一個input中text元素通過循環獲取
var value = $(this).val();
if (value.trim().length == 0){
$(this).css('border-color','red');
ret = false;
}else{
$(this).css('border-color','green');
}
});
}
</script>
</body>
</html>
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
