How to add row after last row in table
<p>Table contains hidden template row and zero or more visible data rows.
In end of table there is add button which shoud add new empty row to end of table.</p>

<p>I tried </p>

<pre><code>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);
}
</code></pre>

<p>but it adds row <strong>before</strong> last row to table. How to add row after last row to table ?</p>

<p>ASP.NET MVC4 application, bootstrap 3 modal, jquery, jquery-ui are used.</p>

<p>html:</p>

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

                            &lt;td&gt;
                                &lt;textarea name="valuetostore"&gt;&lt;/textarea&gt;
                            &lt;/td&gt;

                            &lt;td&gt;
                                &lt;select class="totaltype-select" id="totaltype" name="totaltype"&gt;
                                    &lt;option value=""&gt;&lt;/option&gt;
                                    &lt;option value="Sum"&gt;Summary&lt;/option&gt;
                                    &lt;option value="Lowest"&gt;Smallest&lt;/option&gt;
                                    &lt;option value="Highest"&gt;Biggers&lt;/option&gt;
                                &lt;/select&gt;
                            &lt;/td&gt;
                        &lt;/tr&gt;

                        &lt;!-- other are visible data rows --&gt;
                        &lt;tr&gt;
                            &lt;td&gt;
                                &lt;input type="text" name="name" value="variable1"&gt;
                            &lt;/td&gt;

                            &lt;td&gt;
                                &lt;textarea name="valuetostore"&gt;a-b&lt;/textarea&gt;
                            &lt;/td&gt;

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

            &lt;/div&gt;
        &lt;/div&gt;
    &lt;/div&gt;
&lt;/div&gt;
</code></pre>

<p>Update</p>

<p>I ned to clone template row which is first in body and make new row visible.
I tried:</p>

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

<p>Is this best code  ? Maybe it is bettet to find template row as first in body?</p>