热门标签 | 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)


推荐阅读
  • 本文介绍了一段使用jQuery实现的用户注册页面表单验证代码,适用于前端开发人员学习和参考。该示例结合了HTML、CSS和JavaScript,确保用户输入的数据格式正确。 ... [详细]
  • 前言--页数多了以后需要指定到某一页(只做了功能,样式没有细调)html ... [详细]
  • 本周信息安全小组主要进行了CTF竞赛相关技能的学习,包括HTML和CSS的基础知识、逆向工程的初步探索以及整数溢出漏洞的学习。此外,还掌握了Linux命令行操作及互联网工作原理的基本概念。 ... [详细]
  • 技术分享:从动态网站提取站点密钥的解决方案
    本文探讨了如何从动态网站中提取站点密钥,特别是针对验证码(reCAPTCHA)的处理方法。通过结合Selenium和requests库,提供了详细的代码示例和优化建议。 ... [详细]
  • CSS 布局:液态三栏混合宽度布局
    本文介绍了如何使用 CSS 实现液态的三栏布局,其中各栏具有不同的宽度设置。通过调整容器和内容区域的属性,可以实现灵活且响应式的网页设计。 ... [详细]
  • 本文详细介绍了如何解决Uploadify插件在Internet Explorer(IE)9和10版本中遇到的点击失效及JQuery运行时错误问题。通过修改相关JavaScript代码,确保上传功能在不同浏览器环境中的一致性和稳定性。 ... [详细]
  • 本文介绍了如何利用JavaScript或jQuery来判断网页中的文本框是否处于焦点状态,以及如何检测鼠标是否悬停在指定的HTML元素上。 ... [详细]
  • Linux 系统启动故障排除指南:MBR 和 GRUB 问题
    本文详细介绍了 Linux 系统启动过程中常见的 MBR 扇区和 GRUB 引导程序故障及其解决方案,涵盖从备份、模拟故障到恢复的具体步骤。 ... [详细]
  • 本文介绍了如何使用jQuery根据元素的类型(如复选框)和标签名(如段落)来获取DOM对象。这有助于更高效地操作网页中的特定元素。 ... [详细]
  • 导航栏样式练习:项目实例解析
    本文详细介绍了如何创建一个具有动态效果的导航栏,包括HTML、CSS和JavaScript代码的实现,并附有详细的说明和效果图。 ... [详细]
  • 1:有如下一段程序:packagea.b.c;publicclassTest{privatestaticinti0;publicintgetNext(){return ... [详细]
  • 深入理解Tornado模板系统
    本文详细介绍了Tornado框架中模板系统的使用方法。Tornado自带的轻量级、高效且灵活的模板语言位于tornado.template模块,支持嵌入Python代码片段,帮助开发者快速构建动态网页。 ... [详细]
  • 深入理解Cookie与Session会话管理
    本文详细介绍了如何通过HTTP响应和请求处理浏览器的Cookie信息,以及如何创建、设置和管理Cookie。同时探讨了会话跟踪技术中的Session机制,解释其原理及应用场景。 ... [详细]
  • 本文介绍了一款用于自动化部署 Linux 服务的 Bash 脚本。该脚本不仅涵盖了基本的文件复制和目录创建,还处理了系统服务的配置和启动,确保在多种 Linux 发行版上都能顺利运行。 ... [详细]
  • 本文介绍了多个关于JavaScript的书籍资源、实用工具和编程实例,涵盖从入门到进阶的各个阶段,帮助读者全面提升JavaScript编程能力。 ... [详细]
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社区 版权所有