Tablodaki bazı konumlara yeni satırlar nasıl eklenir

Question

Tablo içeren bir sayfam var. tbody'da angularjs aracılığıyla verileri gösteriyorum. thead'da tbody ile aynı satır var, ancak boş ve ben giriş alanı ve click bir yere (odağı kayboldu) doldurduğumda, bir satır tabloya ekler (thead). Ve doldurulmuş satırda biraz bayrak yapmam gerekiyor - rowAdded = true, çünkü o olmadan bir satırın girişini tıklıyorum ve satırlar ekliyor. Ve bir başka sorun da satırların table sonuna eklenmesidir. bu senaryo üzerinde tüm çalışır:

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

plunker benim örnek vardır: http://plnkr.co/edit/rcnwv0Ru8Hmy7Jrf9b1C?p=preview

Answer 1

bu bir size

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>