Дублирование определенного html-кода в jquery

У меня есть таблица с некоторыми сложными значениями (я имею в виду, что я должен сделать несколько запросов, чтобы получить все значения, которые я хочу в нем). Мне нужно добавить строки в конце этой таблицы и заполнить ячейки тем же кодом, что и существующий html-код.

Например, у меня есть что — то вроде :

<table id="table_cultures">
    <tr>
        <td>Just a string</td>
        <td>Dropdown</td>
        <td><div class='foo'> something..</div></td>
    </tr>
</table>
<button id="plus_button" onclick="addRow()">+</button>

Теперь, в моем javascript, у меня есть что-то вроде :

function addRow(){

    var table = document.getElementById("table_cultures"); //Get the table element
    var itk = document.getElementById('foo'); //Try to get the html to duplicate

    var row = table.insertRow(-1); //Add in the end of the table

    var c1 = row.insertCell(0);
    var c2 = row.insertCell(1);
    var c3 = row.insertCell(2);


        c1.innerHTML= 'Culture';
        c2.innerHTML='test';
        c3.innerHTML=itk;

}

Итак, в переменной itk я пытаюсь получить сгенерированный html и вытащить его в ячейку, bu [Object]t он отображает только HTMLFormElement(потому что это таблица, которую я хочу дублировать).

Возможно ли сделать это таким образом ? Или есть другой способ попроще ?

3 ответа

  1. Вы должны рассмотреть возможность клонирования узла строки вместо получения и установки innerHTML с какой-то вещью, как это:

     var table = document.getElementById("table_cultures"); //Get the table element
        var row = document.getElementById("rowTobeCloned"); //clone the required row
        var clone = row.cloneNode(true); // copy child nodes too
        table.appendChild(clone); // append the new row to the end of the table
    
  2. На данный момент вы не используете jQuery в своем коде вообще, но если вы ищете решение jQuery, вы должны попробовать .clone()

    $("#table_cultures td:last").clone().appendTo("#table_cultures tr");
    

    JSFiddle

  3. Вы используете class («class= ‘foo'») not Id («getElementById»)
    так что должно быть что-то вроде этого

    function addRow(){...
    
    var itk = document.getElementsByClassName('foo')[0]; //Try to get the html to duplicate
    
    ...}