add multiple textbox using button click in javascript

Question

Hello I am trying to add multiple textbox when click on button. i have write following HTML code.

<script type="text/javascript">
 function addRow(btn) {         
     var parentRow = btn.parentNode.parentNode;
     var table = parentRow.parentNode;
     var rowCount = table.rows.length;
     var row = table.insertRow(rowCount);
     var cell1 = row.insertCell(0);
     var element1 = document.createElement("input");
     element1.type = "text";
     cell1.appendChild(element1);
     var cell3 = row.insertCell(1);
 }
</script>
<table>
   <tr>
      <td><input type="text" name="data1" value="abc" /></td>
      <td><button type="button" onClick ="addRow(this)">Add</button></td>
   </tr>
</table>

i dont know how to do . kindly tell me how to do this stuff .... thank you in advance

what is happening, any errors, is the function being called? Can you check using firebug? — Scary Wombat
– Scary Wombat, Commented Oct 2, 2013 at 5:49
@kapil you want this jsfiddle.net/cse_tushar/9EKRB or jsfiddle.net/cse_tushar/9EKRB/1 ?? — Tushar Gupta - curioustushar
– Tushar Gupta - curioustushar, Commented Oct 2, 2013 at 5:54
@AjinderSingh i have already write like thiks onClick ="addRow(this)" — Java Man
– Java Man, Commented Oct 2, 2013 at 5:56

Tushar Gupta - curioustushar · Accepted Answer · 2013-10-02 06:05:08Z

3

Wrap your JavaScript code in the head section.

DEMO of your code

same code with jQuery

DEMO

var txtbox = '<td><input type="text"/></td>';

function addRow(btn) {
    $(btn).closest('tr').append(txtbox);
}

DEMO

var txtbox = '<tr><td><input type="text"/></td></td>';

function addRow(btn) {
    $(btn).closest('table').append(txtbox);
}

References

.closest()

.append()

To add Drop-down list

you just need to add dropdown list code in the var txtbox

DEMO

var txtbox = '<tr><td><select><option value="volvo">Volvo</option><option value="saab">Saab</option><option value="mercedes">Mercedes</option><option value="audi">Audi</option></select></td></td>';

function addRow(btn) {
    $(btn).closest('table').append(txtbox);
}

edited Oct 2, 2013 at 6:05

answered Oct 2, 2013 at 5:58

Tushar Gupta - curioustushar

57.2k24 gold badges106 silver badges110 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Java Man Over a year ago

Hello i have use this in my page but it append end of the table .. i want to add after particular div. then tell me how to do

Andrew Barber · Accepted Answer · 2013-12-26 04:34:47Z

2

try this sample...

var emails = document.getElementById('emails'),
 add_link = document.createElement('a'),
 template = emails.getElementsByTagName('div'),
 current = template.length,
 max = 20;
 template = template[0];

 submit1.onclick = function () {
 var new_field = template.cloneNode(true);
 current += 1;
 new_field.innerHTML = new_field.innerHTML.replace(/1/g, current);
 emails.appendChild(new_field);
if (current === max) {
    add_link.onclick = null;
    document.body.removeChild(add_link);
}
return false;
};

document.body.appendChild(add_link);

For demo http://jsfiddle.net/wQfLT/145/

edited Dec 26, 2013 at 4:34

Andrew Barber

40.3k20 gold badges97 silver badges124 bronze badges

answered Oct 2, 2013 at 5:56

Sindhu

4736 silver badges19 bronze badges

Collectives™ on Stack Overflow

add multiple textbox using button click in javascript

2 Answers 2

1 Comment

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related