Friday, August 29, 2008

Add Multiple rows dynamically by clicking Add New Button

Copy the javascript coding & paste it in head.

<1script type="text/javascript">
function AddRow()
{

var dcname =document.getElementById("dcname");
var dqty =document.getElementById("dqty");
var dstype =document.getElementById("dstype");
var dnature =document.getElementById("dnature");
var morerow=document.getElementById("tbl")
var newtr = document.createElement("tr");

var newtd1 = document.createElement("td");
newtd1.innerHTML = dcname.innerHTML;
newtr.appendChild(newtd1);
var newtd2 = document.createElement("td");
newtd2.innerHTML = dqty.innerHTML;
newtr.appendChild(newtd2);
morerow.appendChild(newtr);
var newtd3 = document.createElement("td");
newtd3.innerHTML = dstype.innerHTML;
newtr.appendChild(newtd3);

var newtd4 = document.createElement("td");
newtd4.innerHTML = dnature.innerHTML;
newtr.appendChild(newtd4);
}
<1/script>

Paste the below content in the body section
<1table width="100%">
<1tbody id="tbl">
<1tr>
<1td><1div align="center">Chemical Name <1/div><1/td>
<1td><1div align="center">Quantity<1/div><1/td>
<1td><1div align="center">Storage Type <1/div><1/td>
<1td><1div align="center">Nature Of <1/div><1/td>
<1td> <1/td>

<1tr>
<1td><1input name="cname[]" type="text" id="cname" style="font-size:10;">
<1td><1input type="text" name="qty[]" id="qty" style="font-size:10;">
<1td><1input name="stype[]" type="text" id="stype" size="10">
<1td><1input type="text" name="natureof[]" id="natureof" style="font-size:10;">
<1td><1input name="Add" type="button" value="add" onclick="return AddRow();">
<1/tr>
<1/tbody>

<1div id="dcname" style="display:none; visibility:hidden"><1input name="cname[]" type="text" id="cname" size="10"><1/div>
<1div id="dqty" style="display:none; visibility:hidden"><1input type="text" name="qty[]" id="qty" size="10"><1/div>
<1div id="dstype" style="display:none; visibility:hidden"><1input type="text" name="stype[]" id="stype"><1/div>
<1div id="dnature" style="display:none; visibility:hidden">

<1input type="text" name="natureof[]" id="natureof" size="10"><1/div>

That's it now you have created a single row and by clicking add new it will add any number of rows dynamically

Note : Remove 1 on every html tag

0 comments: