要件:1行3列のテーブルが1つあります。最初の列にはボタンがあり、2番目の列にはテキストボックスとチェックボックスがあります。
そのボタンをクリックすると、最初の行と同じように1つの新しい行が動的に追加されます。ここで、新しく作成した行のボタンをクリックすると、もう1つの行が追加されます。新しい行が追加されるとすぐに、現在の行ボタンが削除ボタンに変更されます。つまり、最後の行ボタンのみに追加機能があり、他のすべての前の行には削除ボタンがあります。
私はいくつかのコードを書きました、私が得ているのは、前のボタンと同様に最後のボタンをクリックすると新しい行が追加されます。
以前に動的に作成されたボタンの値をdeleteとして変更したい。ボタンをクリックすると、その値がdeleteに変更され(このボタンでその行を削除できるようになります)、新しい行が追加されます。
この出力を取得するのを手伝ってください。私は長い間しようとしています。ありがとうございました。
<html>
<head runat="server">
<TITLE> Add/Remove dynamic rows in HTML table </TITLE>
<SCRIPT language="javascript">
function addRow(tableID) {
var e1=document.documentElement.getElementsByTagName('input');
var table = document.getElementById(tableID);
var rowCount = table.rows.length;
var row = table.insertRow(rowCount);
var cell1 = row.insertCell(0);
var element1 = document.createElement("input");
element1.setAttribute('type','button');
element1.setAttribute('name','Add Row'+rowCount);
element1.setAttribute('value','Add Row');
cell1.appendChild(element1);
element1.setAttribute('onclick','addRow("'+tableID+'")');
var cell2 = row.insertCell(1);
var element2 = document.createElement("input");
element2.type = "text";
cell2.appendChild(element2);
var cell3 = row.insertCell(2);
var element3 = document.createElement("input");
element3.type = "checkbox";
cell3.appendChild(element3);
}
</script>
</head>
<BODY>
<TABLE id="dataTable" width="250px" border="1">
<TR>
<td><INPUT type="button" value="Add Row" name="Add Row0" onclick="addRow('dataTable')"/></td>
<TD> <INPUT type="text" /> </TD>
<TD><INPUT type="checkbox" name="chk"/></TD>
</TR>
</TABLE>
</BODY>
</html>