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

Question

Я выполнил множество решений для вышеуказанной проблемы, но они довольно запутанные, так как «ячейка слева и ячейка справа» в моем случае неприменима.

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

КОД:

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

Теперь в приведенном выше коде <td>1.</td> жестко запрограммирован, но как добавить 'суффикс' в каждый идентификатор, такой как 'ad_element_1', 'ad_duration_1' ,,, 'ad_element_2', 'ad_duration_2' в следующем <tr> и так далее ..

Надеюсь, вы понимаете, что я хочу сказать

Answer 1

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

Answer 2

Хорошо, если вы добавляете динамические элементы, скорее всего, идентификаторы здесь не нужны; вероятно, нет никаких селекторов CSS или jQuery, специально связанных с новыми идентификаторами, в конце концов, они не существуют до тех пор, пока они не будут созданы, если они вообще существуют, поэтому вы можете просто удалить их:

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

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

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

Смотрите здесь как демонстрацию скрипки наведите курсор на элементы ввода, чтобы увидеть новый идентификатор

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);

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

Answer 4

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

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

$ (new_tr) .find ('td: first-child'). Text (function (text) { return (parseInt (text) +1) + "."; });

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