How to add values from a form to a table?
<p>I need to add the given values from a form  into a table  , how to achieve this using java script  .</p>

<p>i have included the code .  so far what i have done . </p>

<p>Here i created a form and two command buttons to add and delete a row , </p>

<p>Now all i need is the values that i enter in the form i created should reflect on the table which i created . </p>

<p>Kindly help me out to achieve this  . </p>

<pre><code>    &lt;script language="javascript"&gt;
    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);
    }
    &lt;/script&gt;

    &lt;tr&gt;
    &lt;td&gt;
    F.Name : &amp;nbsp;
    &lt;/td&gt;
    &lt;td&gt;&lt;input type="text" value="" id="fname"&gt;&lt;/td&gt;
    &lt;/tr&gt;
    &lt;br&gt; &lt;br&gt;
    &lt;tr&gt;


    &lt;td&gt;
    L.Name : &amp;nbsp;
    &lt;/td&gt;

    &lt;td&gt;&lt;input type="text" value="" id="lname"&gt;&lt;/td&gt;
    &lt;/tr&gt;
    &lt;br&gt; &lt;br&gt;
    &lt;tr&gt;

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

      &lt;/select&gt;&lt;/td&gt;

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

    &lt;td&gt;&lt;input type="button" value="Delete"         onclick="deleteRow(this.parentNode.parentNode.rowIndex)"&gt;

    &lt;/td&gt;
    &lt;/tr&gt;
    &lt;/tbody&gt;
    &lt;/table&gt;
</code></pre>
