【问题标题】：how to add row in the table dynamically如何在表格中动态添加行
【发布时间】：2013-04-01 10:03:29
【问题描述】：

如何使用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>

【问题讨论】：

checkAllRev() 是什么，button 应该在哪里？
请忽略checkAllRev()。 ADD按钮可以在桌子底部（桌子外）
那么你到底想添加什么到表中？请花时间在您的问题中明确表达，最终每个人都会更快地解决问题。（如果感觉我在打扰您，我深表歉意，但到目前为止，除了动态添加行之外，我几乎不知道您想要什么；这对您的请求没有足够的解释。）
给定的代码已经包含三行，我想通过单击添加另一行按钮（例如仅添加按钮）添加任意数量的行。目前，如果您单击任何行文本，您将获得该行进行编辑。所以我有编辑功能，但没有表格中的新添加行。
所以你只想添加一个空的单元格行？

标签： javascript html

【解决方案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);

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

【讨论】：

我没有接受这个答案，因为它没有提供所需的输出。有没有其他方法可以动态添加行？