JavascriptのDOMは - 新しく作成されたのappendChildにフォーム要素を追加しますか？

Question

Iは、フォーム入力要素を含むテーブルの行を追加および削除するための2つの機能を有しています。これらは両方とも正常に動作しますが、私は私が唯一、その後作成したテーブルの行に削除ボタン入力を表示する必要があるという問題があります。次のようにのように私の2つの機能があります：

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