当前位置: 代码迷 >> Web前端 >> jquery统制table中的tr上下移动排序
  详细解决方案

jquery统制table中的tr上下移动排序

热度:434   发布时间:2012-06-27 14:20:09.0
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 class="body"  >
    <div class="resume_box">
    <div id="details_right">
        <h2>
            个性化简历</h2>
        <div class="details_right_content clearfix">
            <h3 class="title_one">
                简历输出配置</h3>
            <div class="details_laye clearfix">
                <table>
                    <tbody>
                        <tr>
                            <td>
                            </td>
                            <td style="width: 15%">
                                <span>是否显示</span>
                            </td>
                            <td style="width: 15%">
                                <span>排序</span>
                            </td>
                            <td>
                            </td>
                        </tr>
                       
                        <tr id="PracticeExp">
                            <td>
                                1? <span>
                                    实践经验</span>
                            </td>
                            <td>
                               
                                <input type="checkbox" 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" class="details_del" colspan="4">
                                <input type="submit" value="保 存" class="button_enter" id="btnSubmit" name="btnSubmit" />
                                <input id="ResumeId" name="ResumeId" type="hidden" value="" />
                                <input type="button" value="返 回" class="button_enter" id="btnBack" name="btnBack"
                                    onclick="BackToManage();" />
                            </td>
                        </tr>
                    </tbody>
                </table>
            </div>
        </div>
        <div class="details_right_bottom">
        </div>
    </div>
    <mce:script type="text/javascript"><!--

        function UpSequence(ConfigName) {
            //把他的上一个往下排把他排上去如果是第一个就不让他往上排
            if ($("#" + 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>
  相关解决方案