jQuery克隆具有新id的表,如何集体编写以下代码 [英] jQuery to clone a table with new id, how to write below code collectively
问题描述
我在处理jQuery方面遇到麻烦,请帮帮我.下面是我的表单结构:
I'm having trouble with some jQuery stuff, please help me out. Below is my form structure:
<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>
我想要的是:当我单击添加更多"按钮时,新表(即imagetable的副本)追加到mainTable上,这是我的jQuery代码:
What I want is this: when I click on an Add More Button, a new table (i.e. clone of imagetable) appends to mainTable, here is my jQuery Code:
jQuery(document).ready(function() {
var count=1;
jQuery('#addRow').click( function () {
var Clonedtable = jQuery("#imageTable").clone(true);
Clonedtable.appendTo('table#mainTable');
})
});
- 我需要为表和两个输入创建不同的ID
- 制作ID数组是否有效?
- 我想将克隆表追加到tbody的最后一个表中,而不仅仅是在主ImageTable之后
- 两个输入都应该为空.
- I need to create different IDs for table, and the two inputs
- Is it valid to make an array of IDs?
- I want to append the cloned table append the tbody's last table, not just after the main ImageTable
- Both inputs should be empty.
请建议我优化方法.谢谢.
Please suggest me optimized method. Thanks.
更新:我已经更改了表结构(以前我错了),我想根据下一个输入ID更改标签的for
属性值并删除<sup>*</sup>
标签.我在下面的代码下编写,一切正常,但是我需要集体编写,我不知道如何集体编写,请建议我
UPDATE: i have changed the table structure ( i was wrong before ), i want to change for
attribute value of label according to next input id and delete <sup>*</sup>
tag. i write below code, everything is working fine, but i need to write collectively, i don't understand how to write it collectively, please suggest me
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');
});
推荐答案
编辑:访问克隆元素的属性存在一些问题.我更改了答案,改为使用本机getAttribute
和setAttribute
.
There are some issues with accessing properties of cloned elements. I changed the answer to use the native getAttribute
and setAttribute
instead.
jQuery('#addRow').click(function() {
// Get current count of imageTables and use that value for IDs
var quantity = jQuery("table[id^=imageTable]").length;
// clone the table
var clone = jQuery("#imageTable").clone(true);
// use native DOM methods to update the ID
clone[0].setAttribute('id', clone[0].getAttribute('id') + quantity);
// find any text or file inputs, and iterate over them
clone.find(':text,:file').each(function() {
// use native DOM methods to update the ID
this.setAttribute('id', this.getAttribute('id') + quantity);
// set the value to ""
this.value = "";
});
// append to the <td>
clone.appendTo('#mainTable > tbody:last > td');
});
原始答案:
尝试一下:
<script type="text/javascript">
jQuery(document).ready(function() {
jQuery('#addRow').click( function () {
// Get current count of imageTables and use that value for IDs
var quantity = jQuery("table[id^=imageTable]").length;
// Clone the main table
jQuery("#imageTable").clone(true)
// Change its ID to the current ID plus the quantity variable
.attr( 'id', function() { return this.id + quantity; })
// find any text or file inputs
.find( ':text,:file' )
// change their IDs
.attr( 'id', function() { return this.id + quantity; })
// set the input values to ""
.val( "" )
// return to the cloned table
.end()
// append wherever you want it.
// As the comment below your question states,
// this is not a valid placement
.appendTo('#mainTable > tbody:last');
})
});
</script>
编辑:修复了.find()
中逗号在引号外的错字.
Fixed typo in .find()
where the comma was outside the quotation marks.
这篇关于jQuery克隆具有新id的表,如何集体编写以下代码的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!