開心一笑
一哥們在漳州呆膩了吟逝，就到法國去度度假散散心
剛到巴黎第一天上街，見很多人在買彩票抽獎赦肋，有人抽中三等獎LV包块攒，
有人抽中二等獎勞力士金表……
這哥們看了看，也上去想碰碰運氣佃乘，掏錢就買了一張囱井。
打開一看，眾人立即歡呼趣避，一等大獎出現(xiàn)了!
哥們歡呼雀躍庞呕，真是幸運！
工作人員上前告訴他：先生恭喜你程帕，準(zhǔn)備好行李住练，明天出發(fā)，
一等獎是去中國漳州南山寺愁拭、南靖土樓5曰游讲逛！.......[偷笑][偷笑]
提出問題
Jquery如何實現(xiàn)上下移動和排序排序？岭埠？盏混？
解決問題
這里寫圖片描述
代碼實現(xiàn)：
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
</head>
<script type="text/javascript" src="jquery-2.0.0.js"></script>
<!--
<script type="text/javascript" src="resource_demo.js"></script>
<script type="text/javascript" src="jquery.alerts.js"></script>
<script type="text/javascript" src="ztree/js/jquery.ztree.js"></script>
<script type="text/javascript" src="ztree/css/zTreeStyle/zTreeStyle.css"></script>
<script type="text/javascript"src="jBox/jBox/jquery-1.4.2.min.js"></script>
<script type="text/javascript"src="jBox/jBox/jquery.jBox-2.3.min.js"></script>
<script type="text/javascript"src="jBox/jBox/i18n/jquery.jBox-zh-CN.js"></script>
<script type="text/javascript"src="jquery.cookie.js"></script>
<link href="jBox/jBox/Skins/Blue/jbox.css" rel="stylesheet" type="text/css" /> -->
<body>
<div id="checkAndInverCheck">
<table style="align:center">
<tr>
<td><input type="checkbox" value="蕙蘭">蕙蘭</td>
<td><input type="text" name="orderNum" size="3" value="1"/></td>
<td><input type="button" name="upMove" value="上移"/></td>
<td><input type="button" name="downMove" value="下移"/></td>
</tr>
<tr>
<td><input type="checkbox" value="建蘭">建蘭</td>
<td><input type="text" name="orderNum" size="3" value="2"/></td>
<td><input type="button" name="upMove" value="上移"/></td>
<td><input type="button" name="downMove" value="下移"/></td>
</tr>
<tr>
<td><input type="checkbox" value="寒蘭">寒蘭</td>
<td><input type="text" name="orderNum" size="3" value="3"/></td>
<td><input type="button" name="upMove" value="上移"/></td>
<td><input type="button" name="downMove" value="下移"/></td>
</tr>
<tr>
<td><input type="checkbox" value="墨蘭">墨蘭</td>
<td><input type="text" name="orderNum" size="3" value="4"/></td>
<td><input type="button" name="upMove" value="上移"/></td>
<td><input type="button" name="downMove" value="下移"/></td>
</tr>
</div>
<script type="text/javascript">
//上移
$("input[name='upMove']").bind("click",function(){
var $this = $(this);
var curTr = $this.parents("tr");
var prevTr = $this.parents("tr").prev();
if(prevTr.length == 0){
alert("第一行,想移啥？");
return;
}else{
prevTr.before(curTr);
sortNumber();//重新排序
}
});
//下移
$("input[name='downMove']").bind("click",function(){
var $this = $(this);
var curTr = $this.parents("tr");
var nextTr = $this.parents("tr").next();
if(nextTr.length == 0){
alert("最后一行,想移啥惜论？");
return;
}else{
nextTr.after(curTr);
sortNumber();//重新排序
}
});
//排序
$("input[name='orderNum']").bind("change",function(){
var $this = $(this);
//獲得當(dāng)前行
var curTr = $this.parents("tr");
var curOrderNum = $this.val();
//當(dāng)前行同級的所有行
var siblingsTrs = curTr.siblings();
if(siblingsTrs.length >0){
for(var i in siblingsTrs){
var otherOrderNum = $(siblingsTrs[i]).children().find("input[name='orderNum']").val();
if(parseInt(curOrderNum) <= parseInt(otherOrderNum)){
$(siblingsTrs[i]).before(curTr);
sortNumber();//重新排序
break;
}
}
}
});
function sortNumber(){
var allInput = $("#checkAndInverCheck").find("input[name='orderNum']");
alert(123);
if(allInput.length != 0){
for(var i=0;i<allInput.length;i++){
var tempInput = allInput[i];
tempInput.value = i + 1;
}
}
}
</script>
</body>
</html>
美圖
讀書感悟
- 當(dāng)遭遇痛苦的時候许赃，牢記以下三點：
1.咬緊牙關(guān)，一天一天熬下去馆类；
2.多做點事图焰，欺騙你的大腦；
3.想想你愛的人蹦掐。 - 終于有一天技羔，痛苦好似死皮一樣僵闯，逐漸退去。你如同新生藤滥，甚至更為敏感鳖粟。你重新覺得花是香的，草是綠的拙绊，清風(fēng)拂過臉向图。
- 沒有超能力，但是我們可以超樂觀标沪，改變對生活的態(tài)度榄攀，我們就能變成自己世界中的超級英雄。
