jquery table 动态添加删除行

最新推荐文章于 2024-07-03 02:58:57 发布

原创最新推荐文章于 2024-07-03 02:58:57 发布 · 925 阅读

0 ·

CC 4.0 BY-SA版权

jquery 专栏收录该内容

20 篇文章

订阅专栏

本文介绍了一种使用jQuery实现表格数据行的增加和删除的方法。通过克隆表格的第一行作为新增行的模板，并确保至少保留一行原始数据。同时，为了避免重复，每次仅允许添加一行。

//添加數據行；

function  AddRow(){
              varvTb=$("#TbData");//得到表格ID=TbData的jquery对象      
              //所有的数据行有一个.CaseRow的Class,得到数据行的大小
              varvNum=$("#TbData tr").filter(".CaseRow").size()+1;//表格有多少个数据行
              varvTr=$("#TbData #trDataRow1");//得到表格中的第一行数据        
              varvTrClone=vTr.clone(true);//创建第一行的副本对象vTrClone
              vTrClone[0].id="trDataRow"+vNum;//設置
 第一個Id為當前獲取索引；防止重複添加多個ID為trDataRow1的數據行；一次添加一個；
              vTrClone.appendTo(vTb);//把副本单元格对象添加到表格下方        
       }  
    该方法，主要运用了jquery的clone函数，克隆一个table的行副本。然后添加给原来的table。
 
//删除方法关键Code：
 
              varvNum=$("#TbData tr").filter(".CaseRow").size()+1;//表格有多少个数据行;
              if(vNum<=2)
              {
                   alert('请至少留一行');
                   return;
              }       
              varvbtnDel=$(this);//得到点击的按钮对象           
              varvTr=vbtnDel.parent("td").parent("tr");//得到父tr对象;              
              if(vTr.attr("id")=="trDataRow1")
              {
                 alert('第一行不能删除!');//第一行是克隆的基础，不能删除
                 return;
              }else{
                vTr.remove();
              }