jquery clone方法实现动态增加行和删除行
?
//待克隆的div<div name="divName" > <select id="service_select_id" name="serviceId" style="width: 100px;"> </select> <input id="serviceRateId" name="serviceRate" onblur="javascript:checkServiceRate(this);"name=""maxlength="5" style="width: 60px;"/>% <input id="divideRateId" name="divideRate" onblur="javascript:checkDivideRate(this);" name="" maxlength="5" style="width: 60px;"/>% <a href="#" id="delA" onclick="return false;" title="删除" ></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();}