строка таблицы клонов

Question

Как я могу использовать javascript (я предполагаю), чтобы клонировать строку таблицы, как я прекрасно иллюстрировал на рисунке ниже?

Answer 1

Вы можете подключить живое событие ко всем кнопкам. Например, если вы дадите им класс клона, сработает следующее.

$('input.clone').live('click', function(){
   //put jquery this context into a var
   var $btn = $(this);
   //use .closest() to navigate from the buttno to the closest row and clone it
   var $clonedRow = $btn.closest('tr').clone();
   //append the cloned row to end of the table

   //clean ids if you need to
   $clonedRow.find('*').andSelf().filter('[id]').each( function(){
       //clear id or change to something else
       this.id += '_clone';
   });

   //finally append new row to end of table
   $btn.closest('tbody').append( $clonedRow );
});

Обратите внимание: Если у вас есть элементы в строке таблицы с идентификаторами, вам нужно выполнить .each через них и установить для них новое значение, в противном случае вы получите дубликаты идентификаторов в dom, которые недопустимы и могут разрушить селекторы jQuery

Вы можете сделать это так

Answer 2

Пример jQuery:

$(document).ready(function(){
   $('TABLE.recs').delegate('INPUT.clone','click',function(e){
     e.preventDefault();
     var s = $(this).parent().parent().clone().wrap('<div>').parent().html();
     $('TABLE.recs TBODY TR:last').after(s);
   });
});

Answer 3

Для каких целей вы хотите использовать данные? Ранее я делал подобные вещи в формах ввода данных, и в целом я обнаружил, что для пользователей было бы полезно не манипулировать всем в Javascript, а подключать для хранения данных на сервере и взаимодействовать с AJAX.

Проблема в том, что как только вы начинаете позволять пользователям выполнять подобные сложные манипуляции с таблицами, и они случайно нажимают кнопку "Назад", вы получаете множество недовольных игроков. Кодирование временного хранилища в базе данных не намного сложнее, чем манипулирование Javascript, и на самом деле может быть проще, поскольку вы можете проще разбивать операции. По этой причине отладка также проще (у вас всегда есть доступ к текущему состоянию вашей таблицы).

Множество опций для обработки через AJAX - самое простое - просто использовать разделитель-заполнитель и подавать всю структуру таблицы по мере необходимости.

Answer 4

Если вы хотите действительно простое решение, просто используйте innerHTML:

var html = document.getElementById("the row").innerHTML;

var row = document.createElement('p');

row.innerHTML= html;

document.getElementById("table id").appendChild(row);