纯js动态克隆表一行元素

2019独角兽企业重金招聘Python工程师标准>>>

纯js版：
m = 0 ;// 用于区分input
// 新增一条录入
function AddTR(){
    m += 1;
    var tableObject = document.getElementById("fpqk_tab");
    var oTr = tableObject.rows[1];
    var newTr = oTr.cloneNode(true);
    tableObject.getElementsByTagName("tbody")[0].appendChild(newTr);
    newTr = tableObject.rows[tableObject.rows.length-1];
    newInputs= newTr.getElementsByTagName("input");
    newTd = newTr.lastChild;
    newTd.innerHTML = "<a href='#' onclick='DelRow(this)' id = 'del_input' title='删除此行' >删除</a>";
    for(i=0;i<newInputs.length;i++){
        newInputs[i].id = newInputs[i].id + m ; // 用于区分input
    }
    document.getElementById("but_add"+m).onclick = function(){SelectUserSingle('hydm'+m,'hyxm'+m,'','form1')} 
    document.getElementById("but_del"+m).onclick = function(){ClearUser('hydm'+m,'hyxm'+m);}
       // 有些浏览器不支持setAttribute()方法，建议使用以上方法代替；
    //document.getElementById("but_add"+m).setAttribute("onclick","alert( '本时间段秒杀结束，请关注下一时间段！')");
    //document.getElementById("but_del"+m).setAttribute("onclick","ClearUser('hydm"+m+"','hyxm"+m+"')");
    //$("but_add"+m).bind('onclick',function(){ClearUser('hydm'+m,'hyxm'+m);})；
}

 结合jquery版本：

结合JQuery的版本：
//新增一行
function AddRow( tbid ){  
//var tr = $("#"+tbid+" tr").eq(0).clone();   //克隆一行tr
var tr = $("#"+tbid+" tr:last").clone();
tr.appendTo("#"+tbid+"");    //将tr添加到表paramtb最后
//$("#"+tbid+"").append(tr);
//tr.insertBefore("#tb tr:last");   
var idx = $("#"+tbid+" tr").length-1 ; // 获取table行数 -1 方便从0开始计数id
$("#"+tbid+" tr:last").attr("id", tbid+"_"+idx); //设置tr的id 删除时使用
// 根据转入的表的id判定使用那个删除函数
if(tbid=='paramtb'){
    htmltext = "<a href='javascript:void(0);' onclick='DelRowParam("+idx+")' style='margin-left:30px;'   title='删除此行' >删除</a>";
}else if(tbid=='head'){
    htmltext = "<a href='javascript:void(0);' onclick='DelRowHead("+idx+")'  style='margin-left:30px;'  title='删除此行' >删除</a>";
}else if(tbid=='sql'){
    htmltext = "<a href='javascript:void(0);' onclick='DelRowSql("+idx+")'  style='margin-left:30px;'  title='删除此行' >删除</a>";
}
$("#"+tbid+" tr:last td:last").html(htmltext);
//表格中input元素id的修改
for(i=0;i<$("#"+tbid+" tr:last input").length;i++){
    iputid = $("#"+tbid+" tr:last input")[i].id.split('_')[1];
    $("#"+tbid+" tr:last input")[i].id = idx+'_'+iputid;//dom对象非jquery对象故不能直接使用attr函数
    $("#"+tbid+" tr:last input")[i].name = idx+'_'+iputid;//后台req.POST.get() 获取是通过表单中元素的name获取的，故需要概念name的值。
}
//表格中select元素id的修改
for(i=0;i<$("#"+tbid+" tr:last select").length;i++){
    iputid = $("#"+tbid+" tr:last select")[i].id.split('_')[1];
    $("#"+tbid+" tr:last select")[i].id = idx+'_'+iputid ;
    $("#"+tbid+" tr:last select")[i].name= idx+'_'+iputid ;
}
//表格中textarea元素id的修改
for(i=0;i<$("#"+tbid+" tr:last textarea").length;i++){
    iputid = $("#"+tbid+" tr:last textarea")[i].id.split('_')[1];
    $("#"+tbid+" tr:last textarea")[i].id = idx+'_'+iputid ;
    $("#"+tbid+" tr:last textarea")[i].name = idx+'_'+iputid ;
}
$("#"+tbid+"_idxs").attr('value',idx+1);
}

转载于:https://my.oschina.net/u/877170/blog/174112