Javascript DOM - добавить элемент формы во вновь созданный appendChild? - PullRequest
Новая
       16

Javascript DOM - добавить элемент формы во вновь созданный appendChild?

2 голосов
/ 31 января 2009

У меня есть две функции для добавления и удаления строк таблицы, которые содержат элемент ввода формы. Они оба работают нормально, но у меня есть проблема в том, что мне нужно показывать ввод кнопки «Удалить» только для последовательно созданных строк таблицы. Мои две функции заключаются в следующем: 

function addRow(table_id){
var clone;
var rows=document.getElementById(table_id).getElementsByTagName('tr');
var index=rows.length;
var tbo=document.getElementById(table_id).getElementsByTagName('tbody')[0];
clone=rows[index-1].cloneNode(true);
tbo.appendChild(clone);
}

function delRow(table_id,button){
var row = button.parentNode.parentNode;
var tbo = document.getElementById(table_id).getElementsByTagName('tbody')[0];   
tbo.removeChild(row);
}

и содержание html: 

<form>
<table id="mytab">
<tr>
<td>Upload File <input type="file" name="uploadfile[]" onchange="addRow('mytab')" /> <input name="del_row" type="button" value="Remove Row" onclick="delRow('mytab',this)"/></td>
</tr>
</table>
</form>

Я ни в коем случае не эксперт по Javascript - скорее новичок - поэтому я изо всех сил пытаюсь найти решение.

Ответы [ 2 ]

2 голосов
/ 31 января 2009

Если вам нужно создать этот элемент 

<input name="del_row" type="button" value="Remove Row" onclick="delRow('mytab',this)"/>

каждый раз, когда вызывается функция addRow, вы можете просто сделать это внутри addRow (); 

var input = document.createElement("input");
input.setAttribute("name", "del_row");
input.setAttribute("type", "button");
input.setAttribute("value", "Remove Row");
input.onclick = function() {
    delRow("+table_id+", this);
};
2 голосов
/ 31 января 2009

Я предполагаю, что вы пытаетесь избежать наличия кнопки удаления в первом ряду, но она нужна вам сейчас, потому что вы думаете, что для того, чтобы получить ее в последующих строках, вам нужно иметь ее в ряду, который вы клонируете , Если вместо этого вы просто вставляете новый HTML-код для ввода кнопок загрузки и удаления в методе addRow, вы можете полностью избежать клона, и не будет иметь значения, что содержит исходная строка. 

function addRow(table_id){
   var table = document.getElementById(table_id);
   var row = table.insertRow(table.rows.length);
   var cell = row.insertCell(0);
   var template = table.rows[0].cells[0].innerHTML;
   cell.innerHTML = template + '<input type="button" value="Remove Row"'
                 + ' onclick="delRow(\'' + table_id + '\',this);" />'
}

При этом по-прежнему используется первая строка в качестве шаблона, но вы можете удалить из нее кнопку, добавив ее к существующему тексту.

...