javascript - 如何动态添加表中的行

Question

如何修改代码以使用javascript在表中动态添加行？这是我现有的代码，它具有其他功能。需要表格下方的一个按钮来添加行。我不需要一个弹出窗口来说明您要添加多少行。每一次点击都会添加额外的行。

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>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>

Answer 1

您可以为要添加的行创建一个模板 html，然后在单击按钮时附加该 html。
例如，要添加的行包含两列，看起来像这样:

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

您可以将此模板保存在变量中。例如:

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

现在jQuery的append函数可以用来动态添加行。
由于您需要将行添加到 tbody，因此可以使用以下代码:

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

可以使用类似的方法来实现您想要的任务。