jQuery para clonar uma tabela com um novo ID, como escrever o código abaixo coletivamente
Estou tendo problemas com algumas coisas do jQuery, por favor me ajude. Abaixo está a estrutura do meu formulário:
<form name="imageUploadForm" id="imageUploadForm" action="" method="POST" enctype="multipart/form-data" >
<table border="0" width="80%" cellpadding="2" cellspacing="3" id="mainTable">
<tbody>
<tr>
<td>
<table border="0" id="imageTable" class="imageTable">
<tr>
<td><label for="image_title"><sup>*</sup>Image Title:</label></td>
<td><input type="text" name="image_title[]" id="image_title[]"></td>
</tr>
<tr>
<td><sup>*</sup>Image:</td>
<td><input type="file" name="main_image[]" id="main_image[]" ></td>
</tr>
</table>
</td>
</tr>
</tbody>
<tfoot>
<tr>
<td colspan="2"><input type="button" id="addRow" value="Add More" /></td>
</tr>
</tfoot>
</table>
</form>
O que eu quero é o seguinte: quando clico em um botão Adicionar mais, uma nova tabela (ou seja, um clone do imagetable) é anexada à mainTable, aqui está o meu código jQuery:
jQuery(document).ready(function() {
var count=1;
jQuery('#addRow').click( function () {
var Clonedtable = jQuery("#imageTable").clone(true);
Clonedtable.appendTo('table#mainTable');
})
});
Preciso criar IDs diferentes para a tabela e as duas entradasÉ válido criar uma matriz de IDs?Quero anexar a tabela clonada anexar a última tabela do corpo, não apenas após a ImageTable principalAmbas as entradas devem estar vazias.Por favor, sugira-me o método otimizado. Obrigado.
ATUALIZAR: eu mudei a estrutura da tabela (eu estava errado antes), eu quero mudarfor
valor do atributo do rótulo de acordo com o próximo ID de entrada e excluir<sup>*</sup>
etiqueta, rótulo, palavra-chave. eu escrevo o código abaixo, tudo está funcionando bem, mas preciso escrever coletivamente, não entendo como escrevê-lo coletivamente, por favor me sugira
jQuery('#addRow').live('click', function () {
var quantity = jQuery('table[class^=imageTable]').length;
var clonedRow = jQuery('#mainTable > tbody > tr:first').clone(true);
var textID = clonedRow.find(':text').attr('id');
clonedRow.find('label').attr('for', function () {
return textID + quantity;
});
clonedRow.find('th').text('Image '+(++quantity) + ' :');
clonedRow.find('sup').remove();
clonedRow.attr('id', function () {
return this.id + quantity;
}).find(':text,:file').attr('id', function () {
return this.id + quantity;
}).val('').end().appendTo('#mainTable');
});