热门标签 | 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 实现页面加载进度条
    页面加载进度条是提升用户体验的重要工具,通过在页面头部显示一个加载状态,并在页面完全加载后隐藏,可以有效减少用户的等待焦虑。本文将详细介绍如何使用 jQuery 实现这一功能。 ... [详细]
  • HTML前端开发:UINavigationController与页面间数据传递详解
    本文详细介绍了如何在HTML前端开发中利用UINavigationController进行页面管理和数据传递,适合初学者和有一定基础的开发者学习。 ... [详细]
  • 本文为初学者提供了一条清晰的学习路线,帮助他们逐步成长为优秀的Web开发人员。通过十个关键步骤,涵盖从基础到高级的各个方面,确保每位学习者都能找到适合自己的学习方向。 ... [详细]
  • 嵌套列表的扁平化处理
    本文介绍了一种方法,用于遍历嵌套列表中的每个元素。如果元素是整数,则将其添加到结果数组中;如果元素是一个列表,则递归地遍历这个列表。此方法特别适用于处理复杂数据结构中的嵌套列表。 ... [详细]
  • 实践指南:使用Express、Create React App与MongoDB搭建React开发环境
    本文详细介绍了如何利用Express、Create React App和MongoDB构建一个高效的React应用开发环境,旨在为开发者提供一套完整的解决方案,包括环境搭建、数据模拟及前后端交互。 ... [详细]
  • 本文详细探讨了BCTF竞赛中窃密木马题目的解题策略,重点分析了该题目在漏洞挖掘与利用方面的技巧。 ... [详细]
  • 在编程实践中,正确管理和释放资源是非常重要的。本文将探讨 Python 中的 'with' 关键字及其背后的上下文管理器机制,以及它们如何帮助我们更安全、高效地管理资源。 ... [详细]
  • Web前端开发的职业前景与就业指南
    随着互联网行业的蓬勃发展,Web前端技术因其在用户界面和交互设计中的关键作用而备受企业重视。本文探讨了前端开发的职业前景,以及应届毕业生如何提高自己的竞争力。 ... [详细]
  • 如题:2017年10月分析:还记得在没有智能手机的年代大概就是12年前吧,手机上都会有WAP浏览器。当时没接触网络原理,也不 ... [详细]
  • 题目编号:2049 [SDOI2008]Cave Exploration。题目描述了一种动态图操作场景,涉及三种基本操作:断开两个节点间的连接(destroy(a,b))、建立两个节点间的连接(connect(a,b))以及查询两节点是否连通(query(a,b))。所有操作均确保图中无环存在。 ... [详细]
  • 本文将介绍如何使用原生JavaScript实现一个连连看小游戏中的一个关键功能:当用户点击列表项时,获取该列表项的索引。 ... [详细]
  • 在使用 Python 编程时,如果在一个函数中引用了未声明为全局变量的外部变量,可能会遇到 UnboundLocalError。本文将通过一个具体的例子来解释如何解决这个问题。 ... [详细]
  • 本文详细介绍了进程、线程和协程的概念及其之间的区别与联系。进程是在内存中运行的独立实体,具有独立的地址空间和资源;线程是操作系统调度的基本单位,属于进程内部;协程则是用户态下的轻量级调度单元,性能更高。 ... [详细]
  • Python 日志记录模块详解
    日志记录机制是软件开发中不可或缺的一部分,它帮助开发者追踪和调试程序运行时的各种异常。Python 提供了内置的 logging 模块,使我们在代码中记录和管理日志信息变得更加方便。本文将详细介绍如何使用 Python 的 logging 模块。 ... [详细]
  • 题目描述:计算从起点到终点的最小能量消耗。如果下一个单元格的风向与当前单元格相同,则消耗为0,否则为1。共有8个可能的方向。 ... [详细]
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社区 版权所有