Jak wstawić nowe wiersze w jakiejś pozycji w tabeli

Question

Mam stronę z tabelą. W tbody wyświetlam dane przez angularjs. W thead mam taki sam wiersz jak w tbody, ale jest on pusty, a gdy wypełniłem pole wejściowe i click gdzieś (utrata ostrości), jeden wiersz dodaje do mojej tabeli (thead). I muszę ustawić flagę na wypełnionym wierszu, tak jak - rowAdded = true, ponieważ bez tego klikam na wejście jednego wiersza i dodaje wiersz. I jeszcze jeden problem polega na tym, że wiersze dodają do końca table. to wszystko działa na skrypcie:

var tbody = $('.table-timesheet thead'); 
tbody.on('blur', ':text', function() { 
    var tr = $(this).closest('tr'), 
     notEmpty = $(':text', tr).filter(function() { 
      return $.trim($(this).val()) != ''; 
     }).length; 
    if (notEmpty) { 
     $('.note-input').css('width', '88%').css('float', 'left'); 
     $('.timesheet-delete-button').css('display', 'block'); 
     //tr.clone(true).appendTo(tbody).find(':text').val(''); 
     insRow(); 
    } 
}); 

function deleteRow(row) { 
    var i = row.parentNode.parentNode.rowIndex; 
    document.getElementById('table-body').deleteRow(i); 
} 


function insRow() { 
    var table = document.getElementById('table-body'); 
    var newRow = table.rows[1].cloneNode(true); 
    var len = table.rows.length; 
    newRow.cells[0].innerHTML = len; 

    var inp1 = newRow.cells[1].getElementsByTagName('input')[0]; 
    inp1.id += len; 
    inp1.value = ''; 
    var inp2 = newRow.cells[2].getElementsByTagName('input')[0]; 
    inp2.id += len; 
    inp2.value = ''; 
    table.appendChild(newRow); 
} 

Jest mój przykład w plunker: http://plnkr.co/edit/rcnwv0Ru8Hmy7Jrf9b1C?p=preview

Answer 1

Czy tego szukasz

function insRow(ind){ 
 
    var table = document.getElementById('table-body'); 
 
    var newRow = table.rows[1].cloneNode(true); 
 
    var len = table.rows.length; 
 
    newRow.cells[0].innerHTML = ind!==undefined ? ind : len; 
 
    if(ind!==undefined) 
 
     $(table).find('tr:eq('+ind+')').before(newRow); 
 
    else table.appendChild(newRow); 
 
} 
 

 
insRow(2);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<table id="table-body"> 
 
    <tbody> 
 
    <tr><td>1</td></tr> 
 
    <tr><td>2</td></tr> 
 
    <tr><td>3</td></tr> 
 
    </tbody> 
 
</table>