如何在表中的某个位置插入新行

Question

我有一个带表格的页面。 在 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

- HUSTLIN

---

你的问题有点难以清晰地阅读，我认为这实际上是多个问题。你是想将新行添加到表头（thead）吗？如果是这样，为什么不使用tbody？通常，thead 用于包含关于列内容的信息。由于每次在其中一列中添加信息时都会创建一个新行，因此整个添加行的功能似乎都出了问题。 - IfTrue

演示中没有Angular代码。看起来你正在进行过多的DOM操作，并且依赖于document.ready。这种方法在Angular应用程序中是错误的。你应该更新数据模型以生成视图，而不是自己插入行。如果你想得到更多帮助，请更新演示，使得Angular至少与你的控制器一起启动。 - charlietfl

@HUSTLIN，你应该同时添加一个angular.js的标签。 - Himesh Aadeshara

Answer 1

这是您要找的东西吗？

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>

- joyBlanks