Javascript DOM-폼 요소를 추가하는 새로 만든 appendChild?

Question

나는 두 가지 기능을 추가하고 제거하는 테이블이 포함되어 있는 행태는 입력 요소입니다.그들은 둘 다 잘 작동하고 있어요,하지만 문제는 내가 필요로 하여 제거하는 버튼 입력에서만 이후 만들어진 테이블의 행이 있습니다.두 기능은 다음과 같다:

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 전문가-더 많은 초보자의-그래서 나는 고군분투하는 솔루션.

Answer 1

나는 가정을 방지하기 위해 노력하고 있는 버튼을 제거에서 첫 번째 행하지만,필요가 있기 때문에 지금 당신이 생각하는 것에서 그것을 얻기 위해 이후의 행 당신에 그것을 가지고하는 데 필요한 행을 복제할 수 없습니다.는 경우,대신,새로 삽입 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);" />'
}

이것은 아직도 사용하여 처음 행 템플릿으로,하지만 제거할 수 있습니다 버튼을에서 그것으로 추가되는 추가하여 기존 텍스트입니다.

Answer 2

이 요소를 만들어야하는 경우

<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);
};