javascript - 如何在表中的最后一行之后添加行

Question

表格包含隐藏的模板行和零个或多个可见数据行。 在表的末尾有添加按钮，它应该将新的空行添加到表的末尾。

我试过了

function addVariablesRow() {
    var t = document.getElementById("reportVariablesTable");
    var rows = t.getElementsByTagName("tr");
    var r = rows[rows.length - 1];
    var x = rows[1].cloneNode(true);
    x.style.display = "";
    r.parentNode.insertBefore(x, r);
}

但它会在表的最后一行之前添加行。如何将最后一行之后的行添加到表中？

使用了 ASP.NET MVC4 应用程序、bootstrap 3 modal、jquery、jquery-ui。

html:

<div class="modal" id="reportVariables" tabindex="-1" role="dialog" aria-labelledby="reportVariablesLabel">
    <div class="modal-dialog modal-lg" role="document">
        <div class="modal-content">
            <div class="modal-body">
                <table class="table table-condensed table-striped" id="reportVariablesTable">
                    <thead>
                        <tr>
                            <th>Name</th>
                            <th>Value</th>
                            <th>Calculate</th>
                        </tr>
                    </thead>
                    <tbody>
                        <!-- first row is hidden add template row -->
                        <tr style='display:none'>
                            <td>
                                <input type="text" name="name">
                            </td>

                            <td>
                                <textarea name="valuetostore"></textarea>
                            </td>

                            <td>
                                <select class="totaltype-select" id="totaltype" name="totaltype">
                                    <option value=""></option>
                                    <option value="Sum">Summary</option>
                                    <option value="Lowest">Smallest</option>
                                    <option value="Highest">Biggers</option>
                                </select>
                            </td>
                        </tr>

                        <!-- other are visible data rows -->
                        <tr>
                            <td>
                                <input type="text" name="name" value="variable1">
                            </td>

                            <td>
                                <textarea name="valuetostore">a-b</textarea>
                            </td>

                            <td>
                                <select class="totaltype-select" id="totaltype" name="totaltype">
                                    <option value=""></option>
                                    <option value="Sum">Summary</option>
                                    <option value="Lowest" selected>Smallest</option>
                                    <option value="Highest">Biggers</option>
                                </select>
                            </td>
                        </tr>
                        ... remaining rows
                    </tbody>
                </table>
                    <button onclick="addVariablesRow();">+</button>

            </div>
        </div>
    </div>
</div>

更新

我需要克隆正文中第一个模板行并使新行可见。 我试过:

function addVariablesRow() {
        var $t = $("#reportVariablesTable");
        var $row = $($t.find("tr")[1]);
        var r = $row.clone();
        r[0].style.display = "";
        r.appendTo($t);
}

这是最好的代码吗？也许最好在正文中找到模板行？

Answer 1

正如您提到的 JQuery 是一个选项，您可以使用这样的东西:

function addVariablesRow() {
    var $t = $("#reportVariablesTable");
    var $row = $t.find("tbody tr").first();
    var $newRow = $row.clone();
    $newRow.appendTo($t).show();
}