2

フォーム入力要素を含むテーブル行を追加および削除する 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 の専門家ではなく、むしろ初心者なので、解決策を考え出すのに苦労しています。

4

2 に答える 2

2

最初の行に削除ボタンを配置しないようにしようとしていると仮定していますが、次の行でそれを取得するには、複製している行に配置する必要があると考えているため、今はそこに必要です。代わりに、addRow メソッドのアップロード ボタン入力と削除ボタン入力の両方に新しい HTML を挿入するだけで、クローンを完全に回避でき、元の行に何が含まれているかは問題になりません。

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);" />'
}

これはまだ最初の行をテンプレートとして使用しますが、既存のテキストに追加することで追加されるため、ボタンを削除できます。

于 2009-01-31T17:51:06.613 に答える
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);
};
于 2009-01-31T17:57:07.753 に答える