javascript - how to add row in the table dynamically -

how modify code add row in table dynamically using javascript? existing code having other functionality. need 1 button below table add row. don't need pop-up how many rows want add. every single hit add row.

javascript

var editing = false;  function catchit(e) {     if (editing) return;     if (!document.getelementbyid || !document.createelement) return;     if (!e) var obj = window.event.srcelement;     else var obj = e.target;     while (obj.nodetype != 1) {         obj = obj.parentnode;     }     if (obj.tagname == 'input' || obj.tagname == 'a') return;     while (obj.nodename != 'td' && obj.nodename != 'html') {         obj = obj.parentnode;     }     if (obj.nodename == 'html') return;     var x = obj.innerhtml;     var y = document.createelement('input');     var z = obj.parentnode;     z.insertbefore(y, obj);     z.removechild(obj);     y.value = x;     y.classname = 'inp-edit';     y.onblur = saveedit;     y.focus();     editing = true; }  function saveedit() {     var area = this;     var y = document.createelement('td');     var z = area.parentnode;     y.innerhtml = area.value;     z.insertbefore(y, area);     z.removechild(area);     editing = false; }  document.onclick = catchit; 

html

    <table border=1 class="display">     <thead>         <tr class="portlet-section-header results-header">             <th class="sorting">operator id</th>             <th class="sorting">status</th>             <th class="sorting">first name</th>             <th class="sorting">last name</th>             <th class="sorting">email</th>             <th class="sorting">role</th>             <th class="sorting_disabled">select                 <br />                 <input type="checkbox" onclick="checkall(this);" name="check" />             </th>         </tr>     </thead>     <tbody>         <tr class="odd">             <td>test1</td>             <td>active</td>             <td>wsrc</td>             <td>wsrc</td>             <td>aa@aa.com</td>             <td>se admin</td>             <td>                 <input type="checkbox" value="3" onclick="checkallrev(this);" name="deleteitem" />             </td>         </tr>         <tr class="even">             <td>test2</td>             <td>inactive</td>             <td>eai</td>             <td>subsystem</td>             <td>aa@aa.com</td>             <td>api</td>             <td>                 <input type="checkbox" value="4" onclick="checkallrev(this);" name="deleteitem" />             </td>         </tr>         <tr class="odd">             <td>test3</td>             <td>inactive</td>             <td>dunning</td>             <td>portal</td>             <td>aa@aa.com</td>             <td>api</td>             <td>                 <input type="checkbox" value="5" onclick="checkallrev(this);" name="deleteitem" />             </td>         </tr>     </tbody> </table> 

you can make template html row added, , append html on click of button.
example, row added contained 2 columns , looked thing this:

<tr>     <td>test</td>     <td>active</td> </tr> 

you can save template in variable. example:

var template = "<tr><td>test</td><td>active</td></tr>"; 

now append function of jquery can used add row dynamically.
since need add row tbody, following code can used:

$("tbody").append(template); 

a similar approach can used achieve desired task.