2015-08-03 2 views
1

У меня есть 2 таблицы, и с помощью кнопки я хочу, чтобы клонировать содержимое из tb_new в tb_made:Как клонировать текстовые поля с помощью cloneNode?

var tab = document.getElementById('tb_new'); 
var clone=tab.getElementsByTagName('tr')[1].cloneNode(true); 
var table = document.getElementById("tb_made"); 
table.appendChild(clone); 

Все клонируют отлично, за исключением одной клетки с textarea. Как я могу это исправить?

Fiddle is here.

+1

Покажите нам фрагмент, который может переигрывает его, я создал [один] (https: // jsfiddle. net/3ohsoLzu /), но он работает. – fuyushimoya

+1

Почему тег jQuery? – j08691

+0

просто убедитесь, что tab.getElementsByTagName ('tr') [1] означает, что мы выбрали второй tr, а не первый –

ответ

3

Запись в <textarea> только обновит его значение, а не его содержимое.

Чтобы решить эту проблему вы можете сделать что-то вроде этого:

function add() { 
 
    var tab = document.getElementById('tb_new'); 
 
    var textAreas = tab.getElementsByTagName("textarea"); 
 

 
    for (var i = 0; i < textAreas.length; ++i) { 
 
     textAreas[i].innerHTML = textAreas[i].value; 
 
    } 
 

 
    var clone = tab.getElementsByTagName('tr')[0].cloneNode(true); 
 
    var table = document.getElementById('tb_made'); 
 
    table.appendChild(clone); 
 
}
<table id="tb_new"> 
 
    <tr> 
 
     <td> 
 
      <textarea>Test</textarea> 
 
     </td> 
 
     <td> 
 
      <input> 
 
     </td> 
 
    </tr> 
 
</table> 
 
<input type="button" value="add" onClick="add()"> 
 
<table id="tb_made"> 
 
    <tr> 
 
     <td></td> 
 
    </tr> 
 
</table>