Come inserire nuove righe in qualche posizione nella tabella

Question

Ho una pagina con tabella. In tbody Ho mostrato i dati tramite angularjs. In thead ho la stessa riga di tbody, ma è vuoto, e quando ho riempito il campo di input e click da qualche parte (messa a fuoco persa), una riga aggiunge al mio tavolo (thead). E ho bisogno di fare qualche bandiera sulla riga piena, come ad esempio - rowAdded = true, perché senza che io clic su input di una riga e aggiunge righe. E un altro problema è che le righe si aggiungono alla fine di table. è tutte le opere di questo script:

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

C'è il mio esempio in plunker: http://plnkr.co/edit/rcnwv0Ru8Hmy7Jrf9b1C?p=preview

Answer 1

E 'questo quello che stai cercando per

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>