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

6 comments:

Anonymous said...

I want to add serial no. which will increment after adding every new row

thanks

Anonymous said...

not workin in IE..

Anonymous said...

What about adding that data dynamically to database??, is there a way to create columns that alter dynamically as the row here added?? Awaiting replies...

Manjot kaur said...

You have written wonderful article. Greetings and thank you..

6 Month php Industrial Training in Chandigarh
6 weeks php industrial training in chandigarh

Naviya Nair said...

Great Article..
PHP Training in Chennai
Online PHP Training
Online PHP Training India
PHP Training Chennai
PHP Training institute in Chennai

Bhavya Kumar said...

My friend Suggest me this blog and I can say this is the best blog to get the basic knowledge.Thank you so much for this Selenium Training in Chennai