`
boss5518831534
  • 浏览: 230932 次
  • 性别: Icon_minigender_1
  • 来自: 武汉
社区版块
存档分类
最新评论

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>
分享到:
评论

相关推荐

    jQuery实现table中的tr上下移动并保持序号不变

    本示例主要关注如何利用jQuery实现在HTML表格(table)中移动行(tr)的同时保持行内的序号不变,这对于数据排序或用户交互有着重要的应用。我们将探讨以下关键知识点: 1. jQuery选择器与DOM操作: jQuery提供了...

    jquery做的table行上下移动,互换

    标题提到的“jquery做的table行上下移动,互换”是jQuery实现的一种常见功能,通常用于数据表的排序和编辑。这个功能允许用户通过点击按钮或者直接拖拽来改变表格行的顺序,提高交互性和用户体验。 首先,我们需要...

    table,jquery,tr的上下移动

    能够自定义tr的位置,便于排序操作,000000000

    jQuery实现table上移下移和置顶

    本主题将详细探讨如何使用jQuery实现表格(table)中的行上移、下移和置顶功能,这对于数据排序和用户交互至关重要。 一、jQuery基础 在开始之前,确保已引入jQuery库。你可以通过以下方式在HTML文件中添加引用: ...

    Jquery排序,row上下移动,用户名校验,js读取xml文档

    在给定的标题和描述中,我们涉及了几个关键的知识点:jQuery排序、表格行的上下移动、用户名验证以及使用JavaScript读取XML文档。下面将详细阐述这些技术及其应用。 首先,jQuery排序通常指的是对DOM元素进行排序,...

    jquery 实现上下移动元素排序无刷新

    &lt;title&gt;jQuery上下移动排序 &lt;script src="https://code.jquery.com/jquery-3.6.0.min.js"&gt;&lt;/script&gt; .sortable { cursor: move; } &lt;table id="sortTable"&gt; &lt;tr class="sortable"&gt;1&lt;/tr&gt; &lt;tr class=...

    jquery实现上下移动

    本教程将详细讲解如何利用jQuery实现表格内容的上下移动功能,以及随之变动的序号更新。 一、jQuery基础 jQuery通过提供简洁的API,使得JavaScript代码更易于编写和理解。其核心概念包括选择器(用于选取DOM元素)...

    运用jquery技术实现表格元素的上下移动

    在本教程中,我们将深入探讨如何利用jQuery技术实现表格(table)元素的上下移动,以此来改变表格行(tr)的顺序,以满足用户自定义排序的需求。 首先,我们需要理解HTML表格的基本结构。一个表格由`&lt;table&gt;`元素...

    jquery实现的可增加,删除行,可多行上下移动表格

    标题 "jquery实现的可增加,删除行,可多行上下移动表格" 描述了一种使用JavaScript库jQuery创建的交互式表格功能。这个功能允许用户在表格中动态添加、删除行,以及上下移动表格中的行,提供了更灵活的数据操作体验...

    jquery easy ui 上下排序功能

    在"easy ui移动排序"这个标签中,可能是指允许用户通过拖拽来改变行的顺序。这通常是通过`datagrid`的`onDblClickRow`或`onClickRow`事件结合`reorderColumn`方法实现的。用户双击或单击行时,记录当前的行位置,...

    jquery 移动表格并 排序内容

    在IT领域,jQuery是一个广泛使用的JavaScript库,它简化...对于压缩包中的"jquery move_table",可能包含了实现这些功能的完整或部分代码,通过查看和学习这些代码,可以进一步加深对jQuery实现移动和排序表格的理解。

    jQuery表格自定义拖到列表排序代码

    本教程将详细讲解如何利用jQuery实现表格中的自定义拖动排序功能,即“jQuery表格自定义拖到列表排序代码”。 首先,理解基本概念: 1. **jQuery库**:jQuery是由John Resig于2006年创建的,它通过提供简洁易用的...

    Jquery实现上下移动和排序代码

    利用Jquery可以很方便地实现Web页面中元素的上下移动和排序功能,使得Web开发工作更加高效、简洁。以下是使用Jquery实现元素上下移动和排序的具体知识点: 1. Jquery选择器的使用: Jquery提供了丰富的选择器,可以...

    jquery调整表格行tr上下顺序实例讲解

    表格中的每一行(tr)都有一个包含“上移”和“下移”链接的单元格(td),这两个链接分别绑定到了up和down函数,用于执行相应行的上下移动操作。 接下来,我们来深入讲解up和down这两个函数。这两个函数都接受当前被...

    jQuery实现的调整表格行tr上下顺序

    在网页开发中,表格(Table)是一种常见的数据展示方式,有时候根据需求,我们需要对表格内的行(tr)进行上下移动,以改变数据的显示顺序。本文将详细介绍如何使用JavaScript库jQuery来实现这一功能。 首先,...

    bootstrapTable jquery.tablednd行拖动调整资源.zip

    BootstrapTable 是一个基于 jQuery 的数据表格插件,它提供了丰富的功能和美观的界面设计,用于在网页中展示数据。此压缩包"bootstrapTable jquery.tablednd行拖动调整资源.zip"包含了一组与BootstrapTable集成的...

    JS控制HTMLDOM表格行上下移动

    标题中的“JS控制HTML DOM表格行上下移动”指的是在网页中使用JavaScript操作DOM(Document Object Model)元素,特别是HTML表格的行(tr)进行上下移动的功能。这种功能常见于数据管理界面,允许用户通过交互调整...

    jQuery UI拖拽信息到Table表格特效

    在"jQuery UI拖拽到Table表格特效"中,我们主要关注两个关键点:`draggable`和`droppable`。`draggable()`是jQuery UI的一个方法,用于将元素变为可拖动;`droppable()`则让元素成为可以接受拖放目标的位置。 1. **...

    jQuery表格列表拖动排序代码.zip

    本篇文章将详细介绍如何使用jQuery实现表格列表的拖动排序功能,以及"jQuery表格列表拖动排序代码.zip"中的具体实现方法。 一、jQuery拖动排序的基本原理 jQuery拖动排序功能基于HTML5的拖放(Drag and Drop)API...

Global site tag (gtag.js) - Google Analytics