使用Jquery操作Table中的tr向上或向下移动,以及全选和反选操作.

  1. 点击Table Head中的复选框,全选或反选表格中所有的复选框;
  2. 选中复选框,点击Up 按钮, tr上移;点击 Down 按钮,tr 下移。

ASPX代码:

  1. <table border="0" cellpadding="3" cellspacing="1">
    <tr>
    <td>&nbsp;&nbsp;&nbsp;&nbsp;</td>
    <td align="right">
    <input id="divEditCourses_btnUp" type="button" class="ButtonCss"
    onclick="CourseListMove('up')" runat="server" meta:resourcekey="divEditCourses_btnUp" />&nbsp;
    <input id="divEditCourses_btnDown" type="button" class="ButtonCss"
    runat="server" onclick="CourseListMove('down')" meta:resourcekey="divEditCourses_btnDown" />&nbsp;
    <input id="divEditCourses_Remove" type="button" class="ButtonCss" runat="server"
    onclick="CourseListRemove()" meta:resourcekey="divEditCourses_btnRemove" />
    </td>
    </tr>
    <tr>
    <td>&nbsp;&nbsp;&nbsp;&nbsp;</td>
    <td>
    <asp:GridView ID="divEditCourses_gvCourseList" runat="server" AutoGenerateColumns="false"
    DataKeyNames="TrainingScheduleID" CssClass="t1">
    <Columns>
    <asp:TemplateField ItemStyle-Width="60px" ItemStyle-HorizontalAlign="Center">
    <HeaderTemplate>
    <input type="checkbox" id="chkAll" onclick="CheckAllClick(this)" />
    </HeaderTemplate>
    <ItemTemplate>
    <input type="checkbox" onclick="CheckItemClick()" id="chkItem_<%# Container.DataItemIndex%>"
    trainplanid='<%# Eval("TrainPlanID") %>' rowid='<%# Container.DataItemIndex%>'
    courseid='<%# Eval("CourseID") %>' trainingscheduleid='<%# Eval("TrainingScheduleID") %>'
    orderindex='<%# Eval("OrderIndex") %>' />
    </ItemTemplate>
    <AlternatingItemTemplate>
    <input type="checkbox" onclick="CheckItemClick()" id="chkItem_<%# Container.DataItemIndex%>"
    trainplanid='<%# Eval("TrainPlanID") %>' rowid='<%# Container.DataItemIndex%>'
    courseid='<%# Eval("CourseID") %>' trainingscheduleid='<%# Eval("TrainingScheduleID") %>'
    orderindex='<%# Eval("OrderIndex") %>' />
    </AlternatingItemTemplate>
    </asp:TemplateField>
    <asp:BoundField DataField="CourseName" HeaderText="Course Name" ItemStyle-Width="400px" />
    <asp:CheckBoxField DataField="IsMadantory" HeaderText="Is Madantory" ItemStyle-Width="100px"
    ItemStyle-HorizontalAlign="Center" />
    <asp:BoundField DataField="Trainer" HeaderText="Trainer" ItemStyle-Width="300px" />
    <asp:CommandField ShowEditButton="True" HeaderText="Edit" ItemStyle-HorizontalAlign="Center"
    ItemStyle-Width="100px" />
    </Columns>
    </asp:GridView>
    </td>
    </tr>
    </table>

JavaScript代码:

  1. <script language="javascript" type="text/javascript">
    function CheckAllClick(curr) {
    //这里选择包含trainplanid并且id不等于chkAll的元素
    $(":checkbox[trainplanid]:not(input[id='chkAll'])").attr('checked', curr.checked == true);
    }
    //若所有tbody中的项都选中了,自动将表头中的chkAll选中.
    function CheckItemClick() {
    //获取所有选中的checkbox元素
    var expression1 = $("#<%=divEditCourses_gvCourseList.ClientID %> > tbody > tr > td > input:checkbox:checked");
    //获取所有checkbox元素
    var expression2 = $("#<%=divEditCourses_gvCourseList.ClientID %> > tbody > tr > td > input:checkbox");
    var hasChecked = $(expression1).length == $(expression2).length;
    $("#chkAll").attr("checked", hasChecked);
    }
  2.  
  3. //根据commandName把Table行向上或向下移动
    function CourseListMove(commandName) {
    var selecterTrs = $('#<%=divEditCourses_gvCourseList.ClientID %> > tbody > tr > td > input:checkbox[trainplanid]:checked');
    if (selecterTrs.length == 0) {
    alert('<%= GetLocalResourceObject("Js_SelectARecordTip").ToString() %>');
    return false;
    }
    for (var i = 0; i < selecterTrs.length; i++) {
    var row = $('#' + selecterTrs[i].id).parents("tr:first");
    if (commandName == "up") {
    row.insertBefore(row.prev());
    } else {
    row.insertAfter(row.next());
    }
    }
    }
    //如果都没有选择就移除所有,若选择了记录,就移除选择的记录
    function CourseListRemove() {
    var selecterTrs = $('#<%=divEditCourses_gvCourseList.ClientID %> > tbody > tr > td > input:checkbox[trainplanid]:checked');
    if (selecterTrs.length > 0) {
    for (var i = 0; i < selecterTrs.length; i++) {
    $('#' + selecterTrs[i].id).parents("tr:first").remove();
    }
    }
    else {
    $("#<%=divEditCourses_gvCourseList.ClientID %> tr:not(:first)").remove();
    }
    }
    </script>

JQuery操作Table元素的更多相关文章

  1. web进阶之jQuery操作DOM元素&&MySQL记录操作&&PHP面向对象学习笔记

    hi 保持学习数量和质量 1.jQuery操作DOM元素 ----使用attr()方法控制元素的属性 attr()方法的作用是设置或者返回元素的属性,其中attr(属性名)格式是获取元素属性名的值,a ...

  2. 利用 jQuery 操作页面元素的方法,实现电商网站购物车页面商品数量的增加和减少操作,要求单项价格和总价随着数量的改变而改变

    查看本章节 查看作业目录 需求说明: 利用 jQuery 操作页面元素的方法,实现电商网站购物车页面商品数量的增加和减少操作,要求单项价格和总价随着数量的改变而改变 当用户单击"+" ...

  3. jQuery操作Table tr td常用的方法

    虽然现在DIV+CSS进行页的布局大行其道,但是很多地方使用table还是有很多优势,用table展示数据是比较方便的,下面汇总了jQuery操作Table tr td常用的方法,熟记这些操作技巧,下 ...

  4. 汇总常用的jQuery操作Table tr td方法

    虽然现在DIV+CSS进行页的布局大行其道,但是很多地方使用table还是有很多优势,用table展示数据是比较方便的,下面汇总了jQuery操作Table tr td常用的方法,熟记这些操作技巧,下 ...

  5. jQuery操作table数据上移、下移和置顶

    jQuery 操作table中的tr换行的步骤如下: 1.获取当前tr var $tr = $(this).parents("tr"); 2.移动tr //上移 $tr.prev( ...

  6. 使用 jQuery 操作页面元素的方法,实现浏览大图片的效果,在页面上插入一幅小图片,当鼠标悬停到小图片上时,在小图片的右侧出现与之相对应的大图片

    查看本章节 查看作业目录 需求说明: 使用 jQuery 操作页面元素的方法,实现浏览大图片的效果,在页面上插入一幅小图片,当鼠标悬停到小图片上时,在小图片的右侧出现与之相对应的大图片 实现思路: 在 ...

  7. Jquery操作Table

    Jquery 操作 Html Table 是很方便的,这里对表格的基本操作进行一下简单的总结. 首先建立一个通用的表格css 和一个 表格Table: table { border-collapse: ...

  8. jQuery -- 光阴似箭(三):jQuery 操作 HTML 元素和属性

    jQuery -- 知识点回顾篇(三):jQuery拥有操作 HTML 元素和属性的强大方法. 1. 获取HTML 元素的内容和属性 (1) 获得内容:  text().html() 以及 val() ...

  9. JS/JQuery操作DOM元素笔记

    原因 自己目前在搭建一个.NET Core的框架,正在构建权限这块的东西,今天设置权限界面,需要使用JavaScript操作DOM元素,记录一下. 页面大概是酱紫的(我使用的AdminLTE和LayU ...

随机推荐

  1. JFrame背景

    1.引言 在了解了JFrame面板的相关知识后,我们可以选择在RootPane根面板或LayeredPane面板中设置背景图案. 2.方法 对于大小固定的窗口背景设置如下: //导入图案 ImageI ...

  2. Android TextView标签的显示

    在默认情况下,如果一个TextView中的文字太多,会跨行显示, 通过下面两个参数的设置,可以使TextView固定显示一行,未显示完成的后面用...... android:maxLines=&quo ...

  3. linux bash: sqlplus: command not found 错误处理

    在oracle用户下 ,执行sqlplus命令,抛出如上错误.   解决办法:   1.su oracle   2.cd /home/oracle   3. 执行命令 source .bash_pro ...

  4. double int char 数据类型

    贴心的limits... 测试代码: #include <iostream> #include <stdio.h> #include <limits> #inclu ...

  5. spring 标注

    1.添加支持标注的spring中的jar包: spring-context.jar spring-context-support.jar 2.在xml中配置命名空间和schema <beans ...

  6. 二模 (1) day1

    第一题: 题目大意:给出N(N<=50)个小于1000的正整数Ai,和一个正整数max,和一个整数cur,从前往后依次对每个Ai,可以让cur+Ai 或者 cur-Ai,但是结果不能大于max, ...

  7. ASP.NET MVC学习之控制器篇(二)

    原文链接:http://www.asp.net/learn/mvc/ 这篇教程探索了ASP.NET MVC控制器(controller).控制器动作(controller action)和动作结果(a ...

  8. cmd的xcopy命令

    C#项目的PostEvent里经常会用到xcopy命令,复制目录时容易出错,如下: xcopy sourceDir targetDir,其中的2个目录最后不能有反斜杠"",而目录类 ...

  9. win7 web开发遇到的问题-由于权限不足而无法读取配置文件,无法访问请求的页面

    错误一: HTTP Error 500.19 - Internal Server Error配置错误: 不能在此路径中使用此配置节.如果在父级别上锁定了该节,便会出现这种情况.锁定是默认设置的 (ov ...

  10. SPOJ 10628 求树上的某条路径上第k小的点

    第k小,很容易会想到用主席树来解决 这里简单想一下树的转移过程 因为本身无向图形成一棵树,那么我们总以1为根,那么之后连下去的边对应的点建立的线段树总是在父亲节点对应的树上加上一个当前点对应位置出现的 ...