热门标签 | HotTags
当前位置:  开发笔记 > 前端 > 正文

jQuery增加和删除表格项目及实现表格项目排序的方法

jQuery对表格的操作是老生常谈的问题了,各种插件也到处都是,这里我们还是来从技术着手jQuery增加和删除表格项目及实现表格项目排序的方法:

增加和删除行
jquery对表格的操作是老生常谈的问题。最近项目中用到了,今天在这里分享一下!
效果大体如下:

2016530164711889.gif (712×315)

分享一下代码吧!
html

板块 维度

js操作如下:

 deleteLie: function () { //删除一列
      var index = $(this).parent().index();
      for (var i = 0; i <$(".table tr").length; i++) {
        $($(".table tr")[i]).children().eq(index).remove();
      }
      if ($(".table tr").length == 1 && $(".table tr").eq(0).children().length == 1) {
        $("#Bk_table").hide();
        $(".blankShow").show();
      }
    },
    deleteOneline: function () { //删除一行
      $(this).parent().parent().remove();
      if ($(".table tr").length == 1 && $(".table tr").eq(0).children().length == 1) {
        $("#Bk_table").hide();
        $(".blankShow").show();
      }
    },
    addOneBk: function () { //增加一列
      if ($("#Bk_table").is(":hidden")) {
        $("#Bk_table").show();
      }
      if ($(".blankShow").is(":visible")) {
        $(".blankShow").hide();
      }
      var firstLie = ' 中弘西岸3' +
          '' +
          '';
      $(".table>thead>tr").eq(0).append(firstLie);
      var otherLie = '';
      $(".table>tbody>tr").append(otherLie);
    },
    addWd: function () { //增加一行
      if ($("#Bk_table").is(":hidden")) {
        $("#Bk_table").show();
      }
      if ($(".blankShow").is(":visible")) {
        $(".blankShow").hide();
      }
      var Wdhtml_1 = '' +
          ' ' +
          '维度三' +
          '' +
          '' +
          '';
      var Wdhtml_2 = "";
      var LieLength = $(".table>thead>tr").children().length - 1;
      if (LieLength > 0) {
        for (var i = 0; i ';
        }
      }
      var Wdhtml_3 = '';
      var allWd = Wdhtml_1 + Wdhtml_2 + Wdhtml_3;
      $(".table>tbody").append(allWd);
}

表格排序
这个就稍微复杂点了...
主要思路:
因为JS有SORT的方法,对数组进行排序,那么通过个方法,我们就会想到数组了。
1.点标表格标头的时候,取出点击的是那一列。即列的索引值。因为下面要进行排序的就是该列。所以我要知道是点的那一列。
2.对表格的数据部分,也就是tbody部分,进行点击的列的取值,把这些值存入到一个数组当中。
3.将存入数据的数组,通过SORT方法进行排序。(这里写了两种,升,或降,因为是点击时要切换排序的方式。第一次降,第二次升,第三降,第四升,依次进行)
4.将排序好的数组的值进行遍历,在遍历过程中,和每一行TR的点击列的那个TD当中的数据进行一个比较。如果相等,就插入到tbody的最后去.(最先插入的,将是在第一行。)

$(function(){
  //存入点击列的每一个TD的内容;
  var aTdCOnt= [];

  //点击列的索引值
  var thi = 0
  
  //重新对TR进行排序
  var setTrIndex = function(tdIndex){
    for(i=0;i

示例:


名称 价格 地址 备注 时间
商品1 10.5
商品2 11.3
商品3 9.8
商品4 12.6
商品5 13.9
商品6 18
商品7 21.3
商品8 6.5
商品9 7.4

效果:

2016530164848909.png (547×303)


推荐阅读
  • 前言--页数多了以后需要指定到某一页(只做了功能,样式没有细调)html ... [详细]
  • 2023 ARM嵌入式系统全国技术巡讲旨在分享ARM公司在半导体知识产权(IP)领域的最新进展。作为全球领先的IP提供商,ARM在嵌入式处理器市场占据主导地位,其产品广泛应用于90%以上的嵌入式设备中。此次巡讲将邀请来自ARM、飞思卡尔以及华清远见教育集团的行业专家,共同探讨当前嵌入式系统的前沿技术和应用。 ... [详细]
  • 国内BI工具迎战国际巨头Tableau,稳步崛起
    尽管商业智能(BI)工具在中国的普及程度尚不及国际市场,但近年来,随着本土企业的持续创新和市场推广,国内主流BI工具正逐渐崭露头角。面对国际品牌如Tableau的强大竞争,国内BI工具通过不断优化产品和技术,赢得了越来越多用户的认可。 ... [详细]
  • 深入理解 Oracle 存储函数:计算员工年收入
    本文介绍如何使用 Oracle 存储函数查询特定员工的年收入。我们将详细解释存储函数的创建过程,并提供完整的代码示例。 ... [详细]
  • 本文总结了2018年的关键成就,包括职业变动、购车、考取驾照等重要事件,并分享了读书、工作、家庭和朋友方面的感悟。同时,展望2019年,制定了健康、软实力提升和技术学习的具体目标。 ... [详细]
  • 在计算机技术的学习道路上,51CTO学院以其专业性和专注度给我留下了深刻印象。从2012年接触计算机到2014年开始系统学习网络技术和安全领域,51CTO学院始终是我信赖的学习平台。 ... [详细]
  • 本周信息安全小组主要进行了CTF竞赛相关技能的学习,包括HTML和CSS的基础知识、逆向工程的初步探索以及整数溢出漏洞的学习。此外,还掌握了Linux命令行操作及互联网工作原理的基本概念。 ... [详细]
  • 技术分享:从动态网站提取站点密钥的解决方案
    本文探讨了如何从动态网站中提取站点密钥,特别是针对验证码(reCAPTCHA)的处理方法。通过结合Selenium和requests库,提供了详细的代码示例和优化建议。 ... [详细]
  • CSS 布局:液态三栏混合宽度布局
    本文介绍了如何使用 CSS 实现液态的三栏布局,其中各栏具有不同的宽度设置。通过调整容器和内容区域的属性,可以实现灵活且响应式的网页设计。 ... [详细]
  • 本文详细介绍了如何解决Uploadify插件在Internet Explorer(IE)9和10版本中遇到的点击失效及JQuery运行时错误问题。通过修改相关JavaScript代码,确保上传功能在不同浏览器环境中的一致性和稳定性。 ... [详细]
  • 本文介绍了如何利用JavaScript或jQuery来判断网页中的文本框是否处于焦点状态,以及如何检测鼠标是否悬停在指定的HTML元素上。 ... [详细]
  • 本文介绍了一款用于自动化部署 Linux 服务的 Bash 脚本。该脚本不仅涵盖了基本的文件复制和目录创建,还处理了系统服务的配置和启动,确保在多种 Linux 发行版上都能顺利运行。 ... [详细]
  • 本文详细介绍了W3C标准盒模型和IE传统盒模型的区别,探讨了CSS3中box-sizing属性的使用方法及其在布局中的重要性。通过实例分析,帮助读者更好地理解和应用这一关键概念。 ... [详细]
  • 在Linux系统中配置并启动ActiveMQ
    本文详细介绍了如何在Linux环境中安装和配置ActiveMQ,包括端口开放及防火墙设置。通过本文,您可以掌握完整的ActiveMQ部署流程,确保其在网络环境中正常运行。 ... [详细]
  • 本文介绍如何通过Windows批处理脚本定期检查并重启Java应用程序,确保其持续稳定运行。脚本每30分钟检查一次,并在需要时重启Java程序。同时,它会将任务结果发送到Redis。 ... [详细]
author-avatar
mobiledu2502860093
这个家伙很懒,什么也没留下!
PHP1.CN | 中国最专业的PHP中文社区 | DevBox开发工具箱 | json解析格式化 |PHP资讯 | PHP教程 | 数据库技术 | 服务器技术 | 前端开发技术 | PHP框架 | 开发工具 | 在线工具
Copyright © 1998 - 2020 PHP1.CN. All Rights Reserved | 京公网安备 11010802041100号 | 京ICP备19059560号-4 | PHP1.CN 第一PHP社区 版权所有