如何在追加表格中的行時分配增量ID？

只需要你的幫助。我的問題是我正在創建一個動態表單。在我的表單中有一個按鈕，下面是一個表格。如何在追加表格中的行時分配增量ID？

該場景爲： 1.用戶將點擊按鈕 2.單擊按鈕後，表格行將動態添加。在我的排內有一個文本框

我可以做到這一點，但我怎麼能在用戶點擊按鈕後做這個過程。該行將與文本框一起追加。但我想在文本框中分配一個唯一的ID。在我的情況下，我想要做這個增量。

這裏是我的JS：

$(document).ready(function(){ 
    $("[data-item]").on('click',function(){ 
     $("#grid1 tbody").append("<tr><td><input type='text' value='123' style='width:100px' id='' /></td></tr>"); 
    }); 
});

這裏是我的表：

<input type="button" name="add" data-item="123" value="ADD" class="test" id="test" /> 
<table id="grid1" border="1" style="width: 40%"> 
    <thead> 
     <tr> 
     <th style="text-align: center;">CODE</th> 
     </tr> 
    </thead>    
    <tbody> 
    </tbody> 
</table>

這裏的小提琴： http://jsfiddle.net/rochellecanale/xvdMz/

來源

2013-10-10 Jerielle

需要注意的是，除非這是HTML5，你的ID應該不以數字開頭:) – OptimusCrime

保留一個計數器

$(document).ready(function(){ 
    var counter = 0; 
    $("[data-item]").on('click',function(){ 
     $("#grid1 tbody").append("<tr><td><input type='text' value='123' style='width:100px' id='in-" + counter++ + "' /></td></tr>"); 
    }); 
});

演示：Fiddle

來源

2013-10-10 00:54:57

謝謝..它的工作原理 – Jerielle

你可以這樣來做：

當你創建一個新的行可以檢查當前輸入的長度，並補充說，作爲ID的一部分。

$("[data-item]").on('click',function(){ 
     var $el = $("<tr><td><input type='text' id='myInput" + ($('#grid1').find('input').length +1) + "' value='123' style='width:100px' id='' /></td></tr>"); 

     $("#grid1 tbody").append($el); 
    });

Demo

我還有一個建議，而不是保持被克隆的項目，你可以去爲模板，至少你可以把你的HTML本身這個樣子。

<script type="text/html" id="clone"> 
    <tr><td><input type='text' value='123' style='width:100px' id='' /></td></tr> 
</script>

，然後只用它來克隆，這樣你保持你的HTML在另一個地方和腳本。

$("[data-item]").on('click',function(){ 
     var $el =$($.parseHTML($('#clone').html())).find('input').prop('id', "myInput" + ($('#grid1').find('input').length +1)).end(); 
     $("#grid1 tbody").append($el); 
    });

Demo

來源

2013-10-10 00:57:22 PSL

先生，感謝它的工作原理也。感謝您的迴應。 :) – Jerielle

如何在追加表格中的行時分配增量ID？

回答

相關問題