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

How to add row after last row in table

本文关键字：一行 之后 添加行 最后      更新时间：2023-09-26

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

I tried 

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);
}
这是最好的代码吗?也许它是更好地找到模板行作为第一个在体?

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

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

可以像这样通过jQuery完成，

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

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

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

$('#reportVariablesTable').find('tbody:last')
.append($('#rep‌​ortVariablesTable')
.‌​find('tbody:first').clone())‌​;
相关文章：