我有一个带表格的页面。
在
这是我在 Plunker 上的示例: http://plnkr.co/edit/rcnwv0Ru8Hmy7Jrf9b1C?p=preview
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