Как добавить строку после последней строки в таблице

Question

Таблица содержит скрытую строку шаблона и нулевые или более видимые строки данных. В конце таблицы есть кнопка добавления, которая shoud добавляет новую пустую строку в конец таблицы.

Я попытался

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, загрузочный модуль 3 модальный, 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> 

Update

Я определяется клонировать шаблон строки, который является первым в теле и сделать новую строку видны. Я пробовал:

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

Является ли это лучший код? Может быть, это bettet, чтобы найти строку шаблона как первую в теле?

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

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

Answer 3

Это может быть сделано с помощью JQuery, как это,

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

Вы можете включать в себя что-нибудь в пределах метода после того, как() до тех пор, как это правильный HTML, в том числе несколько строк, как в приведенном выше примере ,

Answer 4

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