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

              } 


推荐阅读
  • 本文介绍了高校天文共享平台的开发过程中的思考和规划。该平台旨在为高校学生提供天象预报、科普知识、观测活动、图片分享等功能。文章分析了项目的技术栈选择、网站前端布局、业务流程、数据库结构等方面,并总结了项目存在的问题,如前后端未分离、代码混乱等。作者表示希望通过记录和规划,能够理清思路,进一步完善该平台。 ... [详细]
  • OleDbDataAdapter充当DataSet和数据源之间的桥梁,用于检索和保存数据。OleDbDataAdapter通过以下方法提供这个桥接器:使用Fill将数据从数 ... [详细]
  • java代码利用aspose,java初学者代码
    本文目录一览:1、aspose.cellsjava合并excel ... [详细]
  • exportdefaultclassIndexextendsComponent{Taro.setNavigationBarTitle({title:this.$rout ... [详细]
  • 云开发与
    大家好,今天我来为大家分享一下,Linux命令查询小程序中的WePY云开发实践。WhyWePY首先,先分享一下为什么要选择WePY?在项目开始进行选型的时候,我可选的底层框架有We ... [详细]
  • C#datatable序列化后整数带有小数点或者小数点变成整数原来datatable的列有个datatype属性,可以指定为int类型或者decimal类型的,如果指定int类型, ... [详细]
  • 将熊猫数据框中的浮点数转换为整数原文:https://www. ... [详细]
  • 安卓ndk开发!高级Android晋升之View渲染机制,附答案
    缘起深圳市腾讯计算机系统有限公司成立于1998年11月,是中国最大的互联网综合服务提供商之一,也是中国服务用户最多的互联网企业之一。腾讯业务多元化& ... [详细]
  • 动态分页实现
    Code分页存储过程CREATEprocedurePagersqlstrnvarchar(4000),--查询字符串currentpageint,--第N页pagesizeint- ... [详细]
  • 优酷如何去广告?优酷去广告方法
    优酷如何去广告?优酷应该是大家最常使用的视频播放器了,然而优酷的广告也是很多,那么要如何去除烦心的广告呢?下面小编给大家分享优酷去广告的小技巧,请大家笑纳!步骤如下:1、找到hos ... [详细]
  • idea 正则表达式搜索替换应用详解_正则表达式
    这篇文章主要介绍了idea正则表达式搜索替换应用详解,本文给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值, ... [详细]
  • 提交后Activity4新 ... [详细]
  • Linux命令如何查询小程序中的WePY云开发
    这篇文章给大家分享的是有关Linux命令如何查询小程序中的WePY云开发的内容。小编觉得挺实用的,因此分享给大家做个参考,一起跟随小编过来看看吧。W ... [详细]
  • TIOBE:全球编程语言最新排名(Kotlin排名进入前50名)
    作为coder,大家当然关心自己所使用语言的应用趋势。要是几年后所用语言变得默默无闻,那岂不是之前的知识储备与经验积累都会大打折扣。TIOBE排行榜是根 ... [详细]
  • 05、Windows Store app 的图片裁切
    在WinPhoneSilverlightapi中,有一个PhotoChooserTask选择器,指定宽、高属性,在选择图片的时候,可以进行裁切,代码:PhotoChooserTas ... [详细]
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社区 版权所有