jquery clone方法实现动态增加行和删除行

 

//待克隆的div
<div class="serviceList-sel-body">
	<div id="serviceId0"   name="divName" >		
	     <select id="service_select_id"  name="serviceId" class="serviceSelect"  style="width: 100px;"> </select>
             <input id="serviceRateId" name="serviceRate" class="serviceRate"                                      onblur="javascript:checkServiceRate(this);"name=""maxlength="5" style="width: 60px;"/>%
             <input id="divideRateId" name="divideRate" class="divideRate" onblur="javascript:checkDivideRate(this);" name="" maxlength="5" style="width: 60px;"/>%
 <a href="#" id="delA" onclick="return false;" title="删除"  class="delRow_Link" ></a>
			   			
</div>	
				

 js代码

//动态添加行	
function addRow(service_id,service_rate,divide_rate,flag){	
        var idNum;//计数标识
	  var row1;	  
		
	     	row1=$("#serviceId"+(idNum-1));//获得第一行 -----修改(显示)	-- 设置jquery对象(待克隆的div)
	     
	   //如果row1为空
	   if(row1.length==0){										
			idNum=1;				
			row1=$("#serviceId"+(idNum-1));									
		}	  	
	  var newRow=row1.clone(true);//创建第一行的一个副本
	  // newRow.insertBefore(row1);//在第一行前插入
	  newRow.insertAfter(row1);//在第一行后插入	  
	  var rndID="serviceId"+idNum;	  
	  newRow.attr("id",rndID);//设置行ID 每次都不一样 
	  
         //给各个 select input 加上不同的id
	  newRow.find("a").attr("id",rndID);
	  newRow.find("select.serviceSelect").attr("id","serviceSelect"+rndID);
	  newRow.find("input.serviceRate").attr("id","serviceRate"+rndID);
	  newRow.find("input.divideRate").attr("id","divideRate"+rndID);
	  //初始值为空
	  $("#serviceRate"+rndID).val("");
	  $("#divideRate"+rndID).val("");
	  //绑定事件
	  newRow.find("input.divideRate").blur(function(){
	  	checkDivideRate(this);
	  	});
	  newRow.find("input.serviceRate").blur(function(){
	  	checkServiceRate(this);
	  	});	  
	  
	  //给新增的每一行内的删除加上删除事件
	  newRow.find("a").click(function(){
               delRow(this);
      
     });
      // 新加行显示删除按键
       newRow.find("a").html(" <span style='color: blue;'>删除</span>");
     
     //修改时候用到
    if(flag==2){
     newRow.find("select.serviceSelect").val(service_id);
     newRow.find("input.serviceRate").val(service_rate);
     newRow.find("input.divideRate").val(divide_rate);    
    } 
    //查看时候用到
    if(flag==3){
     //alert(service_id+" | "+service_rate+" | "+divide_rate); 
     newRow.find("select.serviceSelect_view").val(service_id);
     newRow.find("input.serviceRate_view").val(service_rate);
     newRow.find("input.divideRate_view").val(divide_rate);    
    } 
 //显示克隆出的新行数据
  newRow.show();
     idNum++;//克隆一次加一次
}	



//动态删除行
function delRow(who) {
		$("#" + who.id).remove();
	}