jQuery для клонирования таблицы с новым идентификатором, как написать код ниже

У меня проблемы с некоторыми вещами jQuery, пожалуйста, помогите мне. Ниже моя структура формы:

<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:

jQuery(document).ready(function() {
    var count=1;
    jQuery('#addRow').click( function () {
        var Clonedtable = jQuery("#imageTable").clone(true);
        Clonedtable.appendTo('table#mainTable');
    })
});
Мне нужно создать разные идентификаторы для таблицы, и два входаДопустимо ли сделать массив идентификаторов?Я хочу добавить клонированную таблицу, добавить последнюю таблицу tbody, а не только после основного ImageTableОба входа должны быть пустыми.

Пожалуйста, предложите мне оптимизированный метод. Благодарю.

ОБНОВИТЬ: я изменил структуру таблицы (раньше я ошибался), я хочу изменитьfor значение атрибута метки в соответствии со следующим входным идентификатором и удалить<sup>*</sup> тег. Я пишу ниже код, все работает нормально, но мне нужно написать коллективно, я не понимаю, как написать это коллективно, пожалуйста, предложите мне

 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');
    });
 jessegavin20 сент. 2010 г., 16:11
элемент таблицы не является допустимым дочерним элементом tbody.

Ответы на вопрос(3)

если вы хотите сохранить простые изменения

                    table.appendTo("#mainTable");
 Pramendra Gupta20 сент. 2010 г., 16:15
я просто сосредоточился на основной части, что вместо клонирования вы можете взять html и добавить его прямо вперед. структуру вашей таблицы вы должны выглядеть так, как она сейчас неправильна.
 jessegavin20 сент. 2010 г., 16:15
@JustLearn Тебе нужно улучшить «приятель». Начните с HTML.
 Matt Ball20 сент. 2010 г., 16:15
@JustLearn: если вы не используете другую библиотеку, которая определяет$ (или если вы используете эту переменную самостоятельно), то$ это уже псевдоним дляjQueryпоэтому ваш код может быть более кратким.

на который вы нацеленыtable#mainTableкогда вы действительно хотите добавить его вtbody.

Изменить эту строку

Clonedtable.appendTo('table#mainTable');

К этому

Clonedtable.appendTo('table#mainTable tbody');

Но вы действительно не хотите этого делать. Вы действительно не должны иметь никаких таблиц прямо вtbody, а скорееtd элемент.

Решение Вопроса

РЕДАКТИРОВАТЬ: Есть некоторые проблемы с доступом к свойствам клонированных элементов. Я изменил ответ, чтобы использовать роднойgetAttribute а такжеsetAttribute вместо.

    // 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() где запятая была за кавычками.

 JustLearn20 сент. 2010 г., 16:27
Превосходное решение .... но мне нужно, чтобы клонированная таблица появлялась после mainTable, а не перед основной таблицей
 HPWD03 дек. 2012 г., 15:30
Для меня я не мог заставить отредактированный ответ работать на меня, но оригинальный ответ был точным!
 JustLearn20 сент. 2010 г., 16:50
Понял ..... Вы правы, я был неправ ... забыл написать тд в теле
 user11371620 сент. 2010 г., 16:55
@JustLearn - еще одна вещь.[] недопустимые идентификаторы в HTML 4. Возможно, вам следует это изменить.
 user11371620 сент. 2010 г., 16:30
@Avinash - Пожалуйста, прочитайте мой код комментария в ответе.«Как говорится в комментарии под вашим вопросом, это недопустимое место размещения»
 JustLearn21 сент. 2010 г., 07:45
@patrick, Большое спасибо за помощь, я изменил структуру таблицы, пожалуйста, скажите мне сейчас, как клонировать каждую строку внутри tbody
 user11371620 сент. 2010 г., 16:31
@JustLearn - Дай мне минуту. Я знаю, что есть некоторые странности сclone() в jQuery.
 user37255120 сент. 2010 г., 16:27
@patrick добавлениеTable кtbody  является действительным ??
 user11371620 сент. 2010 г., 16:51
@JustLearn - я обновил свой ответ. Что касаетсяappendTo не появляется там, где вы ожидаете, это потому, что это недопустимое место размещения, как отмечалось в некоторых комментариях. Таким образом, браузер делает все возможное, чтобы выяснить, куда он должен идти. Вы должны изменить свою структуру HTML, чтобы сделать ее действительной. Если вы используете Firebug или какой-либо другой инструмент для просмотра визуализированного HTML, вы увидите, что даже исходная таблица вышла из положения, в котором вы ее разместили.

Ваш ответ на вопрос