0

指定された値をフォームからテーブルに追加する必要があります.Javaスクリプトを使用してこれを達成する方法.

私はコードを含めました。これまで私がやったこと。

ここでは、行を追加および削除するためのフォームと 2 つのコマンド ボタンを作成しました。

今必要なのは、作成したフォームに入力した値が、作成したテーブルに反映されることだけです。

これを達成するために私を助けてください。

    <script language="javascript">
    function deleteRow(i)
    {
    document.getElementById('table1').deleteRow(i)
    }
    function addRow()
    {
    var tbody = document.getElementById("table1").getElementsByTagName("tbody")[0];
    var row = document.createElement("TR");
    var cell1 = document.createElement("TD");
    var inp1 =  document.createElement("INPUT");
    inp1.setAttribute("type","text");
    inp1.setAttribute("value","");
    cell1.appendChild(inp1);
    var cell2 = document.createElement("TD");
    var inp2 =  document.createElement("INPUT");
    inp2.setAttribute("type","text");
    inp2.setAttribute("value","");
    cell2.appendChild(inp2);
    var cell3 = document.createElement("TD");
    var inp3 =  document.createElement("INPUT");
    inp3.setAttribute("type","text");
    inp3.setAttribute("value","");
    cell3.appendChild(inp3);
    var cell4 = document.createElement("TD");
    var inp4 =  document.createElement("INPUT");
    inp4.setAttribute("type","button");
    inp4.setAttribute("value","Delete");
    inp4.setAttribute("onClick", "deleteRow(this.parentNode.parentNode.rowindex)");
    cell4.appendChild(inp4);

    row.appendChild(cell1);
    row.appendChild(cell2);
    row.appendChild(cell3);
    row.appendChild(cell4);
    tbody.appendChild(row);

   //alert(row.innerHTML);
    }
    </script>

    <tr>
    <td>
    F.Name : &nbsp;
    </td>
    <td><input type="text" value="" id="fname"></td>
    </tr>
    <br> <br>
    <tr>


    <td>
    L.Name : &nbsp;
    </td>

    <td><input type="text" value="" id="lname"></td>
    </tr>
    <br> <br>
    <tr>

    <td>
    items  : &nbsp;  &nbsp;
    </td>
    <td width="98"><select name="select" id="item">
        <option value="item1" selected="selected">item1</option>
        <option value="item2">item2</option>
        <option value="item3">item3</option>
        <option value="item4">item4</option>
        <option value="item5">item5</option>

      </select></td>

    </tr>
    <br> <br>
    <input type="button" value="Add Row" onClick="addRow();">
    <br> <br>
    <table id="table1">
    <tbody>
    <tr>
    <td><input type="text" value=""></td>
    <td><input type="text" value="" width="10"></td>
    <td><input type="text" value="" width="10"></td>

    <td><input type="button" value="Delete"         onclick="deleteRow(this.parentNode.parentNode.rowIndex)">

    </td>
    </tr>
    </tbody>
    </table>
4

1 に答える 1

0

手動で行を作成しているので、列に動的に割り当てられた ID を生成および管理する ID ロジックも管理しないのはなぜですか。その後、これを行う必要があるだけで簡単に入力できます。

document.getelementbyID("IDofElement").innerHTML = your content.

IDを生成して動的要素に割り当てるロジックを使用する必要があることは間違いありません

于 2012-05-16T07:30:56.603 に答える