jquery複製當前tr行
阿新 • • 發佈:2018-12-31
//複製 var vBudgetCompileObj = (function() { /*table新增/移除行,引數:tableId*/ var getMaxIndex; var funGenerateRow = function(tableId) { $("a[name='CopyTr'],a[name='DelTr']").unbind("click").click(function() { var index = getMaxIndex() + 1; console.log("index:" + index); if ($(this).attr("name") == "CopyTr") { var newHidden = $('<input type="hidden" name="tbBudCode.index" value="' + index + '">'); var newTr = $('<tr>').addClass("tr_row"); newTr.html($(this).parents('tr').html()); $('select', newTr).next('div').remove(); $(this).parents('tr').after($(newTr)); newTr.before(newHidden); /*迴圈 修改input控制元件id和name*/ newTr.find("input.eaBudcode").each(function () { $(this).attr("id", "tbBudCode" + index ); $(this).attr("name", "tbBudCode" + index ); }); newTr.find("input.eaClientCode").each(function () { $(this).attr("id", "tbClientCode" + index); $(this).attr("name", "tbClientCode" + index); }); newTr.find(".eaBudName").each(function () { $(this).attr("id", "tbBudName" + index); $(this).attr("name", "tbBudName" + index); }); /*迴圈修改select控制元件的value、id和name*/ newTr.find("select.eaDept").each(function () { $(this).attr("id", "ddlDept" + index); $(this).attr("name", "ddlDept" + index); }); newTr.find("select.eaBrand").each(function () { $(this).attr("id", "ddlBrand" + index); $(this).attr("name", "ddlBrand" + index); }); newTr.find("select.eaBudItem").each(function () { $(this).attr("id", "ddlBudItem" + index); $(this).attr("name", "ddlBudItem" + index); }); newTr.find("select.eaCompany").each(function () { $(this).attr("id","ddlCompany"+ index); $(this).attr("name","ddlCompany"+ index); }); newTr.find("select.eaCurrency").each(function () { $(this).attr("id", "ddlCurrency" + index); $(this).attr("name", "ddlCurrency" + index); }); $('select', newTr).chosen({ width : '100%' }); //初始化複製行下拉框 funGenerateRow(tableId); } else { if (confirm("是否刪除?")) { $(this).parents('tr').remove(); //移除行 } } //顯示行號 var thisIndex = 0; $("#" + tableId + " tbody>tr.tr_row").each(function() { var $td = $(this).children('td'); thisIndex++; var thisRowIndex = $('<span class="badge badge-info">' + thisIndex + '</span>'); $td.eq(0).html(thisRowIndex); }); }); }
<table class = "table jtable table-bordered table-striped" id = "table_1" > <thead> <tr> <th style = "width: 50px;" >序號</th> <th style = "width: 150px;" >預算編號</th> <th style = "width: 100px;" >參考編號</th> <th style = "width: 220px;" >預算名稱</th> <th style = "width: 100px;" >部門</th> <th style = "width: 100px;" >品牌</th> <th style = "width: 100px;" >預算科目</th> <th style = "width: 50px;" >公司</th> <th style = "width: 100px;" >預算幣種</th> <th style="width: 50px;">操作</th> </tr> </thead> <tbody> <tr class = "tr_row" > <td> <span class="label label-sm label-success label-mini"> 1 </span> </td> <td> <input class = "form-control input-sm txt-required valid eaBudcode" id = "tbBudCode" name = "tbBudCode" type = "text" value = "REHA1B1" placeholder = "支援系統生成/使用者輸入,系統內唯一即可"/> </td> <td> <input class = "form-control input-sm eaClientCode" id = "tbClientCode" name = "tbClientCode" type = "text" value = ""/> </td> <td> <textarea rows = "2" class = "form-control input-sm txt-required valid eaBudName" id = "tbBudName" name = "tbBudName" >雅培-華北-A&P-半年度預算</textarea> </td> <td> <select class = "fk-select form-control eaDept" id = "ddlDept" name="ddlDept" ></select> </td> <td> <select class = "fk-select form-control eaBrand" id = "ddlBrand" name="ddlBrand" > </select> </td> <td> <select class = "fk-select form-control eaBudItem" id = "ddlBudItem" name="ddlBudItem"> </select> </td> <td> <select class = "fk-select form-control eaCompany" id = "ddlCompany" name="ddlCompany"> </select> </td> <td> <select class = "fk-select form-control eaCurrency" id = "ddlCurrency" name="ddlCurrency" > </select> </td> <td> <div class="input-group btn-group-xs margin-bottom-5"> <span class="input-group-btn margin-top-5" data-title="faplus"> <a href="javascript:void(0);" class="btn default btn-xs" name="CopyTr" title="複製"><i class="fa fa-plus"></i></a> </span> <span class="input-group-btn " data-title="faplus"> <a href="javascript:void(0);" class="btn default btn-xs" name="DelTr" title="刪除"><i class="fa fa-minus"></i></a> </span> </div> </td> </tr> </table>