javascript - How to add row after last row in table - Stack Overflow

admin管理员组

文章数量:1315295

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.

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

but it adds row before last row to table. How to add row after last row to table ?

ASP.NET MVC4 application, bootstrap 3 modal, jquery, jquery-ui are used.

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>

Update

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

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

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

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.

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

but it adds row before last row to table. How to add row after last row to table ?

ASP.NET MVC4 application, bootstrap 3 modal, jquery, jquery-ui are used.

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>

Update

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

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

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

• javascript
• jquery
• asp
• html
• twitter-bootstrap

Share Improve this question Follow edited Oct 24, 2016 at 21:38 Andrus asked Oct 24, 2016 at 21:08 AndrusAndrus 28k6767 gold badges214214 silver badges396396 bronze badges

Add a ment  | 

4 Answers 4

Sorted by: Reset to default 4

As you mentioned JQuery is an option, you could use something like this:

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

It can be done via jQuery like this,

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

You can include anything within the after() method as long as it's valid HTML, including multiple rows as per the example above.

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

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

本文标签： javascriptHow to add row after last row in tableStack Overflow