Дублирование элемента и вставка его в таблицу

Question

Дублирование элемента и вставка его в таблицу

0

У меня возникла проблема с добавлением элемента на страницу. У меня есть раскрывающийся список, который был заполнен php, и мне нужно его дублировать, когда пользователь нажимает кнопку "Добавить элемент". Я могу заставить его дублировать хорошо и хорошо, но проблема заключается в том, чтобы он соответствовал таблице. Поскольку мне нужен каждый список, чтобы иметь свой собственный уникальный идентификатор, я не могу просто дать строке id и дублировать, что, однако, код, который я пробовал, добавляет пустую строку, а затем параметры идут в поле внизу. Есть что-то, что мне не хватает.

$(document).ready(function() 
{
    var InputsWrapper   = $("#input-table"); //Input boxes wrapper ID
    var AddButton       = $("#add-new"); //Add button ID
    var inputId=0; //to keep track of text box added

    $(AddButton).click(function (e)  //on add input button click
    {           
        var original = document.getElementById('listItem' + inputId); //Get the list box to be duplicated
        var clone = original.cloneNode(true); //Clone the original
        clone.id = 'listItem' + ++inputId; //Give the clone a unique id
        InputsWrapper.append("<tr><td>");
        InputsWrapper.append(clone); //Attach clone to parent
        InputsWrapper.append("</td></tr>");
        return false;
    });
});

Wolfbrand 16 апр. 2014, в 14:08

Источник

0

Можете ли вы привести свой пример в jsFiddle с HTML
haxtbh 16 апр. 2014, в 11:16
0

@haxtbh Я пытался получить его на jsFiddle, но по какой-то причине он не работает вообще. Вот как все-таки выглядит то, над чем я работаю: jsfiddle.net/fqbSj/2 Редактировать: я забыл добавить фреймворк jquery. Должен работать сейчас.
Wolfbrand 16 апр. 2014, в 11:35

Теги:

jquery

html

html-table

clone

2 ответа

0

Проблема в том, что у вас отсутствует элемент tbody.

Вы можете использовать один stament в jQuery, используя find, clone, wrapAll и closest.

Код:

$(document).ready(function () {
    var InputsWrapper = $("#input-table"); //Input boxes wrapper ID
    var AddButton = $("#add-new"); //Add button ID
    var inputId = 0; //to keep track of text box added

    $(AddButton).click(function (e) //on add input button click
    {
        $(InputsWrapper).find('tbody:last').append($("#listItem" + inputId).clone(true, true).attr("id", "listItem" + (inputId + 1)).wrapAll("<tr><td>").closest("tr"));

        inputId++; //Give the clone a unique id

        return false;
    });
});

Демо: http://jsfiddle.net/IrvinDominin/h7567/

Irvin Dominin 16 апр. 2014, в 09:31

Ещё вопросы

Можете ли вы привести свой пример в jsFiddle с HTML
@haxtbh Я пытался получить его на jsFiddle, но по какой-то причине он не работает вообще. Вот как все-таки выглядит то, над чем я работаю: jsfiddle.net/fqbSj/2 Редактировать: я забыл добавить фреймворк jquery. Должен работать сейчас.

Reinder Wit · Accepted Answer · 2014-04-16T10-37-00.000Z

(вы забыли добавить библиотеку jQuery в свою скрипку...)

Вы добавляете <tr> непосредственно в таблицу, но должен быть <tbody> между ними. Кажется, он работает нормально, если вы измените свой селектор jquery на это:

var InputsWrapper   = $("#input-table tbody");

Здесь работает скрипка