javascript - How to generate input field in tr dynamically using jquery -

i have got task create input field clicking button.

<table>     <tr>         <th>             name         </th>         <th>             age         </th>     </tr>     <tr>         <td>             nithin         </td>         <td>             24         </td>     </tr> </table> <button id="btn">add row</button> 

on click of button want display textbox allow users add content table.

how can done?

edit:- want consider above td.it must generate based on above td count

explanation

first of all, let me explain use of innerhtml instead of .append():

performance.

---

jsfiddle

---

solution

add following html code under button #btn:

html

<div id="addrow">     <input type="text" id="name" value="" />     <input type="text" id="age" value="" />     <button id="createnewrow">add new row</button> </div> 

css

#addrow {     display:none; } 

javascript/jquery

/* we click #btn# */ $(document).on('click', '#btn', function () {      /* show add row form (or hide it) */     $('#addrow').slidetoggle();      /* change text of #btn         , empty inputs if necessary       */     if ($(this).text() == "add row") $(this).text('hide form');     else {         $('#age,#name').val('');         $(this).text('add row');     } });  /* here add new row using .innerhtml */ $('#createnewrow').on('click', function () {     var name = $('#name').val(),         age = $('#age').val();      $('table tbody')[0].innerhtml += "<tr> <td>" + name + "</td><td>" + age + "</td></tr>"; }); 

---

alternative

you use ajax/html table editing way. see thread: how edit table contents page using javascript. the related demo.