how to add row in the table dynamically

Question

How to modify the code to add row in the table dynamically by using javascript? This is my existing code which is having other functionality. Need one button below the table to add row. I don't need a pop-up which will say how many rows do you want to add. Every single hit will add extra 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 All
                <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>[email protected]</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>[email protected]</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>[email protected]</td>
            <td>API</td>
            <td>
                <input type="checkbox" value="5" onclick="checkAllRev(this);" name="deleteItem" />
            </td>
        </tr>
    </tbody>
</table>

Answer 1

You can make a template html for your row to be added, and append that html on click of the button.
For example, the row to be added contained two columns and looked some thing like this:

<tr>
    <td>Test</td>
    <td>Active</td>
</tr>

You can save this template in a variable. For example:

var template = "<tr><td>Test</td><td>Active</td></tr>";

Now append function of jQuery can be used to add row dynamically.
Since you need to add the row to tbody, following code can be used:

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

A similar approach can be used to achieve your desired task.