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

Jquery动态添加删除table行

最近,有需要做一个动态的给table,添加行,用了点时间,算是做成了。已测试过,但如果发现有什么bug,可以留言,欢迎拍砖。大家一起进步

最近,有需要做一个动态的给table,添加行,用了点时间,算是做成了。已测试过,但如果发现有什么bug,可以留言,欢迎拍砖。大家一起进步。  

这里,用的jquery来做的。关键代码如下:

function   AddRow(){ 

              var vTb=$("#TbData");//得到表格ID=TbData的jquery对象        

              //所有的数据行有一个.CaseRow的Class,得到数据行的大小 

              var vNum=$("#TbData tr").filter(".CaseRow").size()+1;//表格有多少个数据行  

              var vTr=$("#TbData #trDataRow1"); //得到表格中的第一行数据          

              var vTrClOne=vTr.clone(true);//创建第一行的副本对象vTrClone 

              vTrClone[0].id="trDataRow"+vNum;//設置 第一個Id為當前獲取索引;防止重複添加多個ID為trDataRow1的數據行;一次添加一個; 

              vTrClone.appendTo(vTb);//把副本单元格对象添加到表格下方          

       }    

    该方法,主要运用了jquery的clone函数,克隆一个table的行副本。然后添加给原来的table。 

 

  删除方法关键Code: 

              var vNum=$("#TbData tr").filter(".CaseRow").size()+1;//表格有多少个数据行; 

              if(vNum<=2) 

              { 

                   alert('请至少留一行'); 

                   return; 

              }         

              var vbtnDel=$(this);//得到点击的按钮对象             

              var vTr=vbtnDel.parent("td").parent("tr");//得到父tr对象;                

              if(vTr.attr("id")=="trDataRow1") 

              { 

                 alert('第一行不能删除!'); //第一行是克隆的基础,不能删除 

                 return; 

              }else{ 

                vTr.remove();  

              } 


推荐阅读
  • 在使用 MUI 框架进行应用开发时,开发者常常会遇到 mui.init() 和 mui.plusReady() 这两个方法。本文将详细解释它们的区别及其在不同开发环境下的应用。 ... [详细]
  • java datarow_DataSet  DataTable DataRow 深入浅出
    本篇文章适合有一定的基础的人去查看,最好学习过一定net编程基础在来查看此文章。1.概念DataSet是ADO.NET的中心概念。可以把DataSet当成内存中的数据 ... [详细]
  • 本文详细介绍了 Pentaho Kettle 中 RowMetaInterface.writeMeta 方法的使用,并提供了多个代码示例,帮助开发者更好地理解和应用该方法。 ... [详细]
  • 本指南介绍了如何在ASP.NET Web应用程序中利用C#和JavaScript实现基于指纹识别的登录系统。通过集成指纹识别技术,用户无需输入传统的登录ID即可完成身份验证,从而提升用户体验和安全性。我们将详细探讨如何配置和部署这一功能,确保系统的稳定性和可靠性。 ... [详细]
  • Spring框架中的面向切面编程(AOP)技术详解
    面向切面编程(AOP)是Spring框架中的关键技术之一,它通过将横切关注点从业务逻辑中分离出来,实现了代码的模块化和重用。AOP的核心思想是将程序运行过程中需要多次处理的功能(如日志记录、事务管理等)封装成独立的模块,即切面,并在特定的连接点(如方法调用)动态地应用这些切面。这种方式不仅提高了代码的可维护性和可读性,还简化了业务逻辑的实现。Spring AOP利用代理机制,在不修改原有代码的基础上,实现了对目标对象的增强。 ... [详细]
  • 通过在项目中引用 NuGet 包 `ExcelDataReader`,可以实现高效地读取和导入 Excel 文件中的数据。具体方法是在项目中执行 `Install-Package ExcelDataReader` 命令,然后通过定义一个 `LeadingIn` 方法并传入上传文件的路径来完成数据导入。该方法不仅简化了代码逻辑,还显著提升了数据处理的效率和可靠性。 ... [详细]
  • 在处理 GridView 中的行记录时,有时需要动态地添加或删除行,而无需对数据库中的实际数据进行任何更改。本文介绍了如何实现这一功能,确保操作仅限于前端展示层面,而不影响后端数据库的完整性。通过这种方法,用户可以在不修改数据库记录的情况下,灵活地管理 GridView 中的数据展示。 ... [详细]
  • 利用C#技术实现Word文档的动态生成与编辑
    本文通过一个简单的示例,介绍了如何使用C#语言实现Word文档的动态生成与编辑功能。文章详细阐述了在项目中引用Word动态库的方法,并通过具体代码示例展示了如何创建和操作Word表格。此内容旨在为初学者提供参考和学习资料,欢迎读者提出宝贵意见和建议。 ... [详细]
  • 在C#和ASP.NET开发中,TypeParse 是一个非常实用的类型解析扩展方法库,提供了简便的类型转换功能。例如,通过 `var int1 = "12".TryToInt();` 可以将字符串安全地转换为整数,如果转换失败则返回0。此外,还支持更多复杂的类型转换场景,如 `var int2 = "22x".TryToInt();` 和 `var int3 = "3.14".TryToInt();`,确保了代码的健壮性和易用性。 ... [详细]
  • 本文深入探讨了 C# 中 `SqlCommand` 和 `SqlDataAdapter` 的核心差异及其应用场景。`SqlCommand` 主要用于执行单一的 SQL 命令,并通过 `DataReader` 获取结果,具有较高的执行效率,但灵活性较低。相比之下,`SqlDataAdapter` 则适用于复杂的数据操作,通过 `DataSet` 提供了更多的数据处理功能,如数据填充、更新和批量操作,更适合需要频繁数据交互的场景。 ... [详细]
  • 在 Asp.net 应用中,动态加载 DropDownList 控件的数据源是一项常见需求。本文探讨了如何高效地从数据库中获取数据,并实时更新下拉列表,确保用户界面始终与后台数据保持同步。通过使用 ADO.NET 和 LINQ to SQL 技术,开发者可以轻松实现这一功能,同时提高应用的性能和用户体验。文中还提供了代码示例和最佳实践,帮助开发者解决常见的数据绑定问题。 ... [详细]
  • c#中Excel数据的导入、导出
    **导出到Excel文件含完整路径含字段标题 ... [详细]
  • nsitionalENhttp:www.w3.orgTRxhtml1DTDxhtml1-transitional.dtd ... [详细]
  • 1.方法一:采用OleDB读取EXCEL文件:把EXCEL文件当做一个数据源来进行数据的读取操作,实例如下:publicDa ... [详细]
  • 本文介绍了C#中数据集DataSet对象的使用及相关方法详解,包括DataSet对象的概述、与数据关系对象的互联、Rows集合和Columns集合的组成,以及DataSet对象常用的方法之一——Merge方法的使用。通过本文的阅读,读者可以了解到DataSet对象在C#中的重要性和使用方法。 ... [详细]
author-avatar
paalanjorrisch_270
这个家伙很懒,什么也没留下!
PHP1.CN | 中国最专业的PHP中文社区 | DevBox开发工具箱 | json解析格式化 |PHP资讯 | PHP教程 | 数据库技术 | 服务器技术 | 前端开发技术 | PHP框架 | 开发工具 | 在线工具
Copyright © 1998 - 2020 PHP1.CN. All Rights Reserved | 京公网安备 11010802041100号 | 京ICP备19059560号-4 | PHP1.CN 第一PHP社区 版权所有