Клонировать таблицу и отображать после кнопки
Добрый день, сообщество, я столкнулся с проблемой клонирования всей таблицы, если у нее есть решение для клонирования нескольких строк, это очень поможет.
При использовании document.getElementsByTagName("таблица")[2]; он может клонировать таблицу и поместить ее в тело, потому что я использую для этого document.body.appendChild (мой клон).
Вот код:
Решение 1:
function myFunction() {
myTable = document.getElementsByTagName("table")[2]; // doesn't use any table id
myClone = myTable.cloneNode(true);
var y = document.body.appendChild(myClone);
}
Решение 2:
function myFunction() {
var x = document.getElementById("0"); // using this to find auto genereate id for table
test = x.cloneNode(true);
}
Отображение HTML:
<table>
<tr>
<td>
<table id = "0">
<tr>
<td><span></span>Name:<input type = "text" value = "Tom"/> </td>
<td><span> </span>Age:<input type = "text" value = "25"/> </td>
<td><span> </span>Email:<input type = "text" value = "[email protected]"/> </td>
</tr>
</table>
</td>
</tr>
<tr>
<td>
<table id = "1">
<tr>
<td><span></span>Name:<input type = "text" value = "Alice"/> </td>
<td><span> </span>Age:<input type = "text" value = "22"/> </td>
<td><span> </span>Email:<input type = "text" value = "[email protected]"/> </td>
</tr>
</table>
<input type = "button" onclick = "myFunction()"/>
</td>
</tr>
</table>
Ожидаемый результат клонировать таблицу после кнопки, внутри таблицы будет не более 5. Пожалуйста, помогите спасибо.
Я озадачен структурой вашей таблицы. Не лучше ли было бы иметь таблицу, в которой каждая строка содержит три ячейки (имя, возраст и адрес электронной почты), а не каждая строка, содержащая новую таблицу со строкой из трех ячеек?
@VirgilioGM yes немного сбит с толку, но ему нужно расти таким образом из-за сложных данных, я только помещаю строку простой идентификации, чтобы найти помощь здесь
В этом случае вы должны вставить в каждый tr основной таблицы td, содержащий таблицы, которые будут клонированы. Через несколько минут уточню и поставлю полный ответ
Проверьте мой ответ и дайте мне знать, что вы думаете
![Безумие обратных вызовов в javascript [JS]](https://i.imgur.com/WsjO6zJb.png)
Ответы 2
Я чувствую, что следующий код поможет вам.
HTML
<table>
<button onclick = "myFunction()">clone</button>
<tr>
<table id = "parent-table">
<tr id = "parent-row">
<td><span></span>Name:<input type = "text" value = "Tom"/> </td>
<td><span> </span>Age:<input type = "text" value = "25"/> </td>
<td><span> </span>Email:<input type = "text" value = "[email protected]"/></td>
</tr>
</table>
</tr>
</table>
JavaScript
function myFunction(){
let parentTable = document.getElementById("parent-table");
let parentRow = document.getElementsByTagName('tr')
let clone = parentRow[1].cloneNode(true);
parentTable.appendChild(clone)
}
спасибо за решение, у меня не будет идентификатора для <tr>, потому что <tr> внутри таблицы будет динамически зависеть от записей данных, полученных и сгенерированных в таблице, максимум 5 таблиц в <tr>
@Victor, пожалуйста, проверьте другое решение
<table> <input type = "button" value = "clone" onclick = "myFunction()"/> <tr> недопустимый HTML
@DominicAmalJoeF я обновил таблицу <td>, я попробую ваше предложение, сообщу вам, если оно сработает, спасибо.
@DominicAmalJoeF, который по-прежнему является недопустимым html, вы не должны добавлять что-то между элементами создания таблицы
Хотя ответ Доминика Амала Джо Ф. был на правильном пути, у него были некоторые недостатки, а также структура таблицы OP. Я думаю, что этот код будет работать правильно:
function myFunction(){
// get main table body
var tableBody = document.getElementById('mytable').children[0];
// get existing rows
var rows = tableBody.children.length;
// clone the last row (which contains the last table)
var newRow = tableBody.children[rows-1].cloneNode(true);
// get the new row table
var newTable = newRow.children[0].children[0]
// change the table id
newTable.setAttribute('id', rows);
// reset the inputs values
var cells = newTable.children[0].children[0].children;
for (var i=0; i<cells.length; i++) {
cells[i].children[1].value = "";
}
// append the new row to the main table body
tableBody.appendChild(newRow);
}<table id = "mytable">
<tr>
<td>
<table id = "0">
<tr>
<td><span>Name:</span><input type = "text" value = "Tom"/></td>
<td><span>Age:</span><input type = "number" value = "25"/></td>
<td><span>Email:</span><input type = "email" value = "[email protected]"/></td>
</tr>
</table>
</td>
</tr>
<tr>
<td>
<table id = "1">
<tr>
<td><span>Name:</span><input type = "text" value = "Alice"/></td>
<td><span>Age:</span><input type = "number" value = "22"/></td>
<td><span>Email:</span><input type = "email" value = "[email protected]"/></td>
</tr>
</table>
</td>
</tr>
</table>
<button onclick = "myFunction()">Clone</button>да, я забыл добавить <td> в таблицу. спасибо, что показали решение, я попробую, если оно сработает, я дам вам знать.
Не могли бы вы загрузить свой рабочий код на Fiddle или Codepen?