jquery table 动态添加删除行

 //添加數據行；

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();

               }