如何在表格的最后一行之后添加行

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);
}

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

使用了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();
}

Answer 2

可以像这样通过jQuery来完成，

$('#reportVariablesTable tr:last').after('<tr>...</tr><tr>...</tr>');

您可以在 after() 方法中包含任何内容，只要它是有效的 HTML，包括上面示例中的多行。

Answer 3

var t = document.getElementById("reportVariablesTable");
var row = document.createElement("tr")
t.appendChild(row)

Answer 4

$('#reportVariablesTable').find('tbody:last')
.append($('#rep‌​ortVariablesTable')
.‌​find('tbody:first').clone())‌​;