Динамическое добавление/удаление строк в таблице с использованием jquery/javascript

Question

У меня было много решений для вышеупомянутой проблемы, но они довольно запутываются, поскольку я оставил & cell right ', по-видимому, не применим в моем случае.

Использование метода клонирования jquery довольно просто, но есть и одна проблема. Проблема в том, что когда я клонирую последнюю строку, она скопирует все данные из следующей строки. Другая проблема связана с этим: ID. Когда клонирование выполняется, копируется одно и то же имя «&« ID », что создаст проблему при отправке данных. Мне также нужна динамичность. Таким образом, я не понимаю, как мы можем передавать данные для функции clone, которая решит проблему с динамическим атрибутом.

КОД:

<table id="advertisement_main_table" class="table" cellpadding="4" cellspacing="1" width="100%;"> 
<tr class="odd align_center"> 
        <td>1.</td> 
        <td><input type="text" id="ad_elements" class="textbox_150_with_border"></td> 
        <td><textarea id="ad_description" rows="01" cols="50" class="advertisement_textarea" ></textarea></td> 
        <td><input type="text" id="ad_duration" class="textbox_60_with_border"></td> 
        <td><input type="text" id="ad_loop_day" class="textbox_60_with_border"></td> 
        <td><input type="text" id="ad_seconds_played" class="textbox_100_with_border"></td> 
       </tr></table> 

сейчас выше код 1. жестко закодировано, но, как добавляется суффикс '' в каждом ид как 'ad_element_1', 'ad_duration_1' ,,, 'ad_element_2', 'ad_duration_2' в следующий и так далее ..

надежда у undrstand то, что я хочу сказать

Answer 1

Часть решения заключается в использовании <input type="text" name="ad_elements[]" class="textbox_150_with_border" /> вместо идентификатора там. Таким образом, когда оно клонировано, имя остается действительным, и вы получите массив записей ad_elements, когда он будет опубликован.

Для остальных, как поворот «1.», в «2.», боюсь, нет волшебной пули, вы должны сделать это самостоятельно после клонирования, но это довольно легко в этом конкретном случае:

$ (new_tr) .find ('td: text (function (text) { return (parseInt (текст) +1) + "."; });

Просто замените new_tr любой переменной, содержащей клонированный TR.

Answer 2

Ну, если вы добавляете динамические элементы, шансы на то, что здесь действительно не нужны, все равно нужны; есть, вероятно, не любой CSS или JQuery селекторы specfically, связанные с новыми идентификаторами, Afterall, они не существуют, пока они не будут созданы, если вообще, так что вы можете просто удалить их:

$(clonedRow).find('*').removeAttr('id'); 

В противном случае если вы действительно хотите новые идентификаторы, вы можете просто сохранить глобальный счетчик newId и связать новые идентификаторы для каждого элемента:

newId++; 
$(clonedRow).find('*').attr('id', function() { 
    if (this.id.length) return this.id + '_' + newId; 
}); 

See here as fiddle demonstrationпарить над входными элементами, чтобы увидеть новый идентификатор

Answer 3

Вот как я решил эту проблему.

var $newRow = $("#tableName tbody>tr:last").clone(); 
$newRow.find('input').attr('someAttribute','0'); 
$newRow.find('input').attr('anotherAttribute','1'); 
$('#tableName>tbody').append($newRow); 

Просто замените «ввод» на тип элемента управления, который у вас есть в таблице. И «someAttribute» с фактическим именем атрибута, второй аргумент - это, конечно, ваше значение для этого атрибута.

Answer 4

Вы можете использовать плагин шаблона jquery для достижения этого. Создайте разметку для добавления строк таблицы и повторите ее в шаблоне. Затем вызовите функцию на загрузке страницы или OnClick любой кнопки или там, где она вам нужна. Если вам нужны данные на стороне сервера, это также можно сделать, создав веб-метод и вернув объект jason.Вы можете найти более подробную информацию по адресу: http://api.jquery.com/jQuery.template/