您的位置：首页 > 其它

IPSEC域策略会覆盖本地策略

2014-08-10 21:41 204 查看

页面效果如下：

HTML代码如下：

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>jQuery实现行上下移动并删除(顺序不变)</title>
<style>
.rowNum {width:10px;text-align:center;border:none}
.btn    {width:10px;text-align:center}
td      {padding-left:5px;padding-right:5px;padding-top:3px;padding-bottom:3px}
</style>
</head>
<body>
<table id="tbHide" style="display:none">
<tr id="trHide"></tr>
</table>
<table border="1" id="tbShow">
<thead>
<tr>
<th>No</th>
<th>Name</th>
<th colspan="3">操作</th>
<th>Id</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>First</td>
<td><input type="button" name="btnUp"   value="↑" onclick="move(this)"></td>
<td><input type="button" name="btnDown" value="↓" onclick="move(this)"></td>
<td><input type="button" name="btnDel"  value="×" onclick="move(this)"></td>
<td><input type="text"   name="rowNum"  value="1" readonly class="rowNum"></td>
</tr>
<tr>
<td>2</td>
<td>Second</td>
<td><input type="button" name="btnUp"   value="↑" onclick="move(this)"></td>
<td><input type="button" name="btnDown" value="↓" onclick="move(this)"></td>
<td><input type="button" name="btnDel"  value="×" onclick="move(this)"></td>
<td><input type="text"  name="rowNum"   value="2" readonly class="rowNum"></td>
</tr>
<tr>
<td>3</td>
<td>Third</td>
<td><input type="button" name="btnUp"   value="↑" onclick="move(this)"></td>
<td><input type="button" name="btnDown" value="↓" onclick="move(this)"></td>
<td><input type="button" name="btnDel"  value="×" onclick="move(this)"></td>
<td><input type="text"   name="rowNum"  value="3" readonly class="rowNum"></td>
</tr>
<tr>
<td>4</td>
<td>Forth</td>
<td><input type="button" name="btnUp"   value="↑" onclick="move(this)"></td>
<td><input type="button" name="btnDown" value="↓" onclick="move(this)"></td>
<td><input type="button" name="btnDel"  value="×" onclick="move(this)"></td>
<td><input type="text"   name="rowNum"  value="4" readonly class="rowNum"></td>
</tr>
<tr>
<td>5</td>
<td>Fifth</td>
<td><input type="button" name="btnUp"   value="↑" onclick="move(this)"></td>
<td><input type="button" name="btnDown" value="↓" onclick="move(this)"></td>
<td><input type="button" name="btnDel"  value="×" onclick="move(this)"></td>
<td><input type="text"   name="rowNum"  value="5" readonly class="rowNum"></td>
</tr>
</tbody>
</table>
</body>
</html>

JavaScript如下：

<script>
var tempSelector = "td:last-child input[name=rowNum]";

// Button点击
function move(obj){
var btnType = $(obj).attr("name");
var currRow = $(obj).parent().parent();

if(btnType == "btnUp"){
moveUpCommand(currRow);
}else if(btnType == "btnDown"){
moveDownCommand(currRow);
}else if(btnType == "btnDel"){
delRowOperate(currRow);
}
}

// move up
function moveUpCommand(currRow){
var firstTr = $("#tbShow tbody tr:first-child");
var firstTrNo = Number($(firstTr).find(tempSelector).val());
var currRowNo = Number($(currRow).find(tempSelector).val());
if(currRowNo == firstTrNo){
return;
}else{
moveUpOperate(currRow);
}
}

// move down
function moveDownCommand(currRow){
var lastTr = $("#tbShow tbody tr:last-child");
var lastTrNo  = Number($(lastTr).find(tempSelector).val());
var currRowNo = Number($(currRow).find(tempSelector).val());
if(currRowNo == lastTrNo){
return;
}else{
moveDownOperate(currRow);
}
}

// delete row
function delRowOperate(currRow){
$(currRow).nextAll().each(function(){
$(this).find(tempSelector).val(Number($(this).find(tempSelector).val())-1);
});
$(currRow).remove();
}

// move up operate
function moveUpOperate(currRow){
var tempRow = $("#trHide").html($(currRow).html());
var prevRow = $(currRow).prev();

var prevRowNo = $(prevRow).find(tempSelector).val();
var tempRowNo = $(tempRow).find(tempSelector).val();

// current row
$(prevRow).find(tempSelector).val(Number(prevRowNo)+1);
$(currRow).html("").append($(prevRow).html());

// previous row
$(tempRow).find(tempSelector).val(Number(tempRowNo)-1);
$(prevRow).html("").append($(tempRow).html());

$("#trHide").html("");
}

// move down operate
function moveDownOperate(currRow){
var tempRow = $("#trHide").html($(currRow).html());
var nextRow = $(currRow).next();
var nextRowNo = $(nextRow).find(tempSelector).val();
var tempRowNo = $(tempRow).find(tempSelector).val();

// current row
$(nextRow).find(tempSelector).val(Number(nextRowNo)-1);
$(currRow).html("").append($(nextRow).html());

// next row
$(tempRow).find(tempSelector).val(Number(tempRowNo)+1);
$(nextRow).html("").append($(tempRow).html());

$("#trHide").html("");
}

</script>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航