[英]How to insert new rows in some position in table
我有桌子的頁面。 在tbody
我通過angularjs
顯示數據。 在thead
我有與tbody
相同的行,但它是空的,當我填充輸入字段並click
某處(焦點丟失)時,一行添加到我的表( thead
)。 我需要在填充行上制作一些標志,就像 - rowAdded = true
,因為沒有它我點擊一行的輸入和行添加。 還有一個問題是行添加到table
的末尾。 這一切都適用於這個腳本:
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中有我的例子: http ://plnkr.co/edit/rcnwv0Ru8Hmy7Jrf9b1C?p = preview
這是你想要的
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>
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.