在日常开发中难免会对一个对话框进行编辑、修改方面的操作，示例代码如下:
<!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>
本文转自027ryan 51CTO博客，原文链接：http://blog.51cto.com/ucode/1847219，如需转载请自行联系原作者
