1

要件：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>
4

1 に答える 1

-1

jQueryを使用する場合、答えは次のようになります。

// First clone the last row as a new row
$('#dataTable tr:last-child').clone().appendTo('#dataTable');
// Now change all buttons except the last row to call a delete function
$('#dataTable tr:not(tr:last-child) input[type=button]').click(function (event) {
    // Passing this to the function sends the button element from which you could determine the parent or whatever else you need
    deleteRow(this);
});

編集：また、この方法で作業することを選択した場合は、HTMLのonclick割り当てを削除し、代わりに[追加]ボタンにjQueryから.clickハンドラーを割り当てます。

$('#dataTable tr:last-child input[type=button]').click(function (event) {
    addRow('dataTable');
});
于 2012-10-30T10:13:24.463 に答える