如何将表单中的值添加到表中?

时间:2012-05-16 07:01:32

标签: javascript

我需要将表单中的给定值添加到表中,如何使用java脚本实现此目的。

我已经包含了代码。到目前为止我做了什么。

在这里,我创建了一个表单和两个命令按钮来添加和删除行

现在我需要的是我在我创建的表单中输入的值应该反映在我创建的表上。

请帮助我实现这一目标。

    <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>

1 个答案:

答案 0 :(得分:0)

当您手动创建行时,为什么不管理生成和管理动态分配给列的ID的ID逻辑,那么您可以轻松填充它们,只需要这样做。

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

你肯定需要使用一个逻辑来生成和分配ID到动态元素