jquery控制table中的tr上下移动排序
原文地址：http://blog.csdn.net/aa644509120/article/details/6423667
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>
</title>
<mce:script language="javascript" type="text/javascript" src="jquery-1.4.1.js" mce_src="jquery-1.4.1.js"></mce:script>
</head>
<body value="1" name="IsDisplay_PracticeExp" id="IsDisplay_PracticeExp" />
</td>
<td>
<span name="upPracticeExp" style="cursor: pointer;" mce_style="cursor: pointer;" onclick="UpSequence('PracticeExp')">
↑</span>????<span style="cursor: pointer" mce_style="cursor: pointer" onclick="DownSequence('PracticeExp')"
name="downPracticeExp">↓</span>????
<input id="Sequence_PracticeExp" name="Sequence_PracticeExp" type="hidden" value="1" />
</td>
<td>
<input id="ConfigName_PracticeExp" name="ConfigName_PracticeExp" type="hidden" value="PracticeExp" />
</td>
</tr>
<tr id="ProSkill">
<td>
2? <span>
专业技能</span>
</td>
<td>
<input type="checkbox" value="1" name="IsDisplay_ProSkill" id="IsDisplay_ProSkill"
checked />
</td>
<td>
<span name="upProSkill" style="cursor: pointer;" mce_style="cursor: pointer;" onclick="UpSequence('ProSkill')">
↑</span>????<span style="cursor: pointer" mce_style="cursor: pointer" onclick="DownSequence('ProSkill')"
name="downProSkill">↓</span>????
<input id="Sequence_ProSkill" name="Sequence_ProSkill" type="hidden" value="2" />
</td>
<td>
<input id="ConfigName_ProSkill" name="ConfigName_ProSkill" type="hidden" value="ProSkill" />
</td>
</tr>
<tr id="SchoolPost">
<td>
3? <span>
校内职务</span>
</td>
<td>
<input type="checkbox" value="1" name="IsDisplay_SchoolPost" id="IsDisplay_SchoolPost" />
</td>
<td>
<span name="upSchoolPost" style="cursor: pointer;" mce_style="cursor: pointer;" onclick="UpSequence('SchoolPost')">
↑</span>????<span style="cursor: pointer" mce_style="cursor: pointer" onclick="DownSequence('SchoolPost')"
name="downSchoolPost">↓</span>????
<input id="Sequence_SchoolPost" name="Sequence_SchoolPost" type="hidden" value="3" />
</td>
<td>
<input id="ConfigName_SchoolPost" name="ConfigName_SchoolPost" type="hidden" value="SchoolPost" />
</td>
</tr>
<tr id="LanguageInfo">
<td>
4? <span>
语言能力</span>
</td>
<td>
<input type="checkbox" value="1" name="IsDisplay_LanguageInfo" id="IsDisplay_LanguageInfo" />
</td>
<td>
<span name="upLanguageInfo" style="cursor: pointer;" mce_style="cursor: pointer;" onclick="UpSequence('LanguageInfo')">
↑</span>????<span style="cursor: pointer" mce_style="cursor: pointer" onclick="DownSequence('LanguageInfo')"
name="downLanguageInfo">↓</span>????
<input id="Sequence_LanguageInfo" name="Sequence_LanguageInfo" type="hidden" value="4" />
</td>
<td>
<input id="ConfigName_LanguageInfo" name="ConfigName_LanguageInfo" type="hidden" value="LanguageInfo" />
</td>
</tr>
<tr id="WorkExp">
<td>
5? <span>
工作经验</span>
</td>
<td>
<input type="checkbox" value="1" name="IsDisplay_WorkExp" id="IsDisplay_WorkExp" />
</td>
<td>
<span name="upWorkExp" style="cursor: pointer;" mce_style="cursor: pointer;" onclick="UpSequence('WorkExp')">
↑</span>????<span style="cursor: pointer" mce_style="cursor: pointer" onclick="DownSequence('WorkExp')"
name="downWorkExp">↓</span>????
<input id="Sequence_WorkExp" name="Sequence_WorkExp" type="hidden" value="5" />
</td>
<td>
<input id="ConfigName_WorkExp" name="ConfigName_WorkExp" type="hidden" value="WorkExp" />
</td>
</tr>
<tr id="AwardInfo">
<td>
6? <span>
学生奖励</span>
</td>
<td>
<input type="checkbox" value="1" name="IsDisplay_AwardInfo" id="IsDisplay_AwardInfo"
checked />
</td>
<td>
<span name="upAwardInfo" style="cursor: pointer;" mce_style="cursor: pointer;" onclick="UpSequence('AwardInfo')">
↑</span>????<span style="cursor: pointer" mce_style="cursor: pointer" onclick="DownSequence('AwardInfo')"
name="downAwardInfo">↓</span>????
<input id="Sequence_AwardInfo" name="Sequence_AwardInfo" type="hidden" value="6" />
</td>
<td>
<input id="ConfigName_AwardInfo" name="ConfigName_AwardInfo" type="hidden" value="AwardInfo" />
</td>
</tr>
<tr id="ProjectExp">
<td>
7? <span>
项目经验</span>
</td>
<td>
<input type="checkbox" value="1" name="IsDisplay_ProjectExp" id="IsDisplay_ProjectExp" />
</td>
<td>
<span name="upProjectExp" style="cursor: pointer;" mce_style="cursor: pointer;" onclick="UpSequence('ProjectExp')">
↑</span>????<span style="cursor: pointer" mce_style="cursor: pointer" onclick="DownSequence('ProjectExp')"
name="downProjectExp">↓</span>????
<input id="Sequence_ProjectExp" name="Sequence_ProjectExp" type="hidden" value="7" />
</td>
<td>
<input id="ConfigName_ProjectExp" name="ConfigName_ProjectExp" type="hidden" value="ProjectExp" />
</td>
</tr>
<tr id="CareerOrientation">
<td>
8? <span>
职业倾向</span>
</td>
<td>
<input type="checkbox" value="1" name="IsDisplay_CareerOrientation" id="IsDisplay_CareerOrientation" />
</td>
<td>
<span name="upCareerOrientation" style="cursor: pointer;" mce_style="cursor: pointer;" onclick="UpSequence('CareerOrientation')">
↑</span>????<span style="cursor: pointer" mce_style="cursor: pointer" onclick="DownSequence('CareerOrientation')"
name="downCareerOrientation">↓</span>????
<input id="Sequence_CareerOrientation" name="Sequence_CareerOrientation" type="hidden" value="8" />
</td>
<td>
<input id="ConfigName_CareerOrientation" name="ConfigName_CareerOrientation" type="hidden" value="CareerOrientation" />
</td>
</tr>
<tr id="EducationInfo">
<td>
9? <span>
教育经历</span>
</td>
<td>
<input type="checkbox" value="1" name="IsDisplay_EducationInfo" id="IsDisplay_EducationInfo" />
</td>
<td>
<span name="upEducationInfo" style="cursor: pointer;" mce_style="cursor: pointer;" onclick="UpSequence('EducationInfo')">
↑</span>????<span style="cursor: pointer" mce_style="cursor: pointer" onclick="DownSequence('EducationInfo')"
name="downEducationInfo">↓</span>????
<input id="Sequence_EducationInfo" name="Sequence_EducationInfo" type="hidden" value="9" />
</td>
<td>
<input id="ConfigName_EducationInfo" name="ConfigName_EducationInfo" type="hidden" value="EducationInfo" />
</td>
</tr>
<tr>
<td align="center" colspan="4">
<input type="submit" value="保 存" id="btnSubmit" name="btnSubmit" />
<input id="ResumeId" name="ResumeId" type="hidden" value="" />
<input type="button" value="返 回" id="btnBack" name="btnBack"
onclick="BackToManage();" />
</td>
</tr>
</tbody>
</table>
</div>
</div>
<div + ConfigName).prev().prev().html() != null) {
var checkedTR = $("#" + ConfigName).prev();
if ($("#" + ConfigName).next().next().html() == null) {//如果是最后一个
$("span[name='down" + ConfigName + "']").show(); //当前的那个显示向下的箭头
checkedTR.find("span[name^='down']").hide(); //当前上面的那个则隐藏向下的箭头
}
if (checkedTR.prev().prev().html() == null) {//如果是第二个
$("span[name='up" + ConfigName + "']").hide(); //当前的那个隐藏向上的箭头
checkedTR.find("span[name^='up']").show(); //当前上面的那个则显示向上的箭头
}
checkedTR.insertAfter($("#" + ConfigName));
var obj = $("#Sequence_" + ConfigName)
obj.val(parseInt(obj.val()) - 1);
var inputId = checkedTR.find("input[id^='Sequence_']"); //把他下面的那列的隐藏域的值加一
inputId.val(parseInt(inputId.val()) + 1);
}
}
function DownSequence(ConfigName) {
//把他的下一个往上排把他排下去如果是最后一个就不让他往下排
if ($("#" + ConfigName).next().next().html() != null) {
var checkedTR = $("#" + ConfigName).next();
if (checkedTR.next().next().html() == null) {//如果是倒数第二个则隐藏下面的
$("span[name='down" + ConfigName + "']").hide();
checkedTR.find("span[name^='down']").show();
}
if ($("#" + ConfigName).prev().prev().html() == null) {//如果是第一个
$("span[name='up" + ConfigName + "']").show(); //当前的那个显示向上的箭头
checkedTR.find("span[name^='up']").hide();
}
checkedTR.insertBefore($("#" + ConfigName));
var obj = $("#Sequence_" + ConfigName)
obj.val(parseInt(obj.val()) + 1);
var inputId = checkedTR.find("input[id^='Sequence_']"); //把他下面的那列的隐藏域的值减一
inputId.val(parseInt(inputId.val()) - 1);
}
}
// --></mce:script>
</div>
<div class="clear"></div>
</body>
<mce:script type="text/javascript"><!--
$(document).ready(function() {
$("span[name^='up'")[0].style.display = 'none';
$("span[name^='down'")[$("span[name^='down']").length - 1].style.display = 'none';
$("#ResumeForm").validate({
rules: {
SkillIndustry: { selectEmpty: true },
SkillName: { required: true },
SkillLevel: { selectEmpty: true },
UsedTime: { required: true, number: true }
},
messages: {
SkillIndustry: {
selectEmpty: '请选择行业'
},
SkillName: {
required: '请输入名称'
},
SkillLevel: {
selectEmpty: '请选择掌握程度'
},
UsedTime: {
required: '请输入使用时间',
number: "只能输入数字"
}
}
});
});
$("#btnSubmit").click(function() {
var isRight = true;
if (!isRight)
return false;
});
// --></mce:script>
</html>
