jQuery的克隆行，它與不同的ID

HTML表，它的第二排，我想克隆是
jQuery的克隆行，它與不同的ID

<table id="tblDoc" class="doc-Table"> 
<tr> 
    <td> 
     <label>Document Description</label></td> 
    <td> 
     <label>Custom</label></td> 
    <td> 
     <label>File Type</label></td> 
    <td> 
     <label>Ref</label></td> 
    <td> 
     <label>Document</label></td> 
    <td></td> 
</tr> 
<tr id="uploadrow_0"> 
    <td> 
     <asp:DropDownList ID="ddlDocumentDescription_0" runat="server"></asp:DropDownList> 
    </td> 
    <td> 
     <input id="txtCustomFileName_0" type="text" class="upload-TextBoxes" /></td> 
    <td> 
     <select id="ddlFileType_0" class="upload-Dropdowns"> 
      <option value="0">--Select--</option> 
      <option value="1">A</option> 
      <option value="2">B</option> 
     </select></td> 
    <td> 
     <input id="txtReferenceNo_0" type="text" class="upload-TextBoxes" /></td> 
    <td> 
     <input id="fileDocument_0" class="file-upload" type="file" /></td> 
</tr>

+添加另一個

我想打副本的所有元素第二排每次添加另一個按鈕。因此我已經使用

$(document).ready(function() { 
    $("#addAnother").click(function() { 
     addAnotherRow(); 
    }); 
}); 

function addAnotherRow() { 
    var row = $("#tblDoc tr:nth-child(2)").clone(); 
    $('#tblDoc').append(row); 
}

當我克隆它給第二行相同的ID。

欲ID爲第二行：
1 - uploadrow_1
2 - ddlDocumentDescription_1（它是一種asp.net控制以便ID不會像這樣）
3 - txtCustomFileName_1
4 - ddlFileType_1
5 - txtReferenceNo_1
6 - fileDocument_1
等等。

在此先感謝您的幫助。

來源

2015-05-15 Saurabh bhatia

您可以在DOM追加之前更改元素的屬性.. – Rayon

@RayonDabre像$（「＃tblDoc TR：第n個孩子（ 2）「）.clone（）。attr（'id'，'id'+ Count ++）？計數是一個全局變量。但我如何處理內部元素？ –

http://jsfiddle.net/y7q6x4so/3/

選擇最後一排，並添加標識由一個所有的時間遞增。

function addAnotherRow() { 
     var row = $("#tblDoc tr").last().clone(); 
     var oldId = Number(row.attr('id').slice(-1)); 
     var id = 1 + oldId; 


     row.attr('id', 'uploadrow_' + id); 
     row.find('#txtCustomFileName_' + oldId).attr('id', 'txtCustomFileName_' + id); 
     row.find('#ddlDocumentDescription_' + oldId).attr('id', 'ddlDocumentDescription_' + id); 
     row.find('#ddlFileType_' + oldId).attr('id', 'ddlFileType_' + id); 
     row.find('#txtReferenceNo_' + oldId).attr('id', 'txtReferenceNo_' + id); 
     row.find('#fileDocument_' + oldId).attr('id', 'fileDocument_' + id); 

     $('#tblDoc').append(row); 
    }

enter image description here

來源

2015-05-15 04:56:16

你的Jsfiddle工作正常嗎？我打開了螢火蟲，發現每個文本框，下拉列表等都有相同的id，但感謝您的幫助。 –

是的它正在工作@Saurabhbhatia –

現在發現它工作正常。 :) –

試試這個：

<script type="text/javascript"> 
    $(document).ready(function() 
    { 
     $("#addAnother").click(function() 
     { 
     addAnotherRow(); 
     }); 
    }); 
    var counter = 0; 
    function addAnotherRow() 
    { 
     ++counter; 
     var row = $("#tblDoc tr:nth-child(2)").clone(); 
     row.find(":input").attr("id", function() 
     { 
     var currId = $(this).attr("id"); 
     return currId.replaceAt(currId.length - 1, counter); 
     }); 
     $('#tblDoc').append(row); 
    } 
    String.prototype.replaceAt = function(index, character) 
    { 
     return this.substr(0, index) + character; 
    } 
    </script>

來源

2015-05-15 05:01:53 Rayon

jQuery的克隆行，它與不同的ID

回答

相關問題