Question

如何通过单击表格单元格来在特定索引处添加表格行或表格列，与excel工作表相同。

<table >
  <tr>
    <th></th>
    <th></th> 
    <th></th>
  </tr>
  <tr>
    <td></td>
    <td></td> 
    <td></td>
  </tr>
</table>

添加行脚本：

function AppendRows() {
        var tableRows = document.getElementById('myTable'),
            row = tableRows.insertRow(tableRows.rows.length);
        row.height = '50';
        for (var i = 0; i < tableRows.rows[0].cells.length; i++) {
            row.insertCell(i), i, 'row';
        }
    }

Answer 1

这是一个有关如何插入新行的示例。您可以使用几种方法，但基本上这是方法

function insertrow() {
  var newRowIndex = 1;
  var row1 = document.getElementById("table").childNodes[1].childNodes[newRowIndex];
  var newRow = document.createElement("tr");
  var col0 = document.createElement("td");
  col0.innerHTML = "newA";
  newRow.appendChild(col0);
  var col1 = document.createElement("td");
  col1.innerHTML = "newB";
  newRow.appendChild(col1);
  var col2 = document.createElement("td");
  col2.innerHTML = "newC";
  newRow.appendChild(col2);
  row1.parentNode.insertBefore(newRow, row1);
}

<button onclick="insertrow()">Insert row</button>
<table id="table">
  <tr>
    <td>a</td>
    <td>b</td>
    <td>c</td>
  </tr>
  <tr>
    <td>d</td>
    <td>e</td>
    <td>f</td>
  </tr>
</table>

我还建议您看看insertBefore文档。

Answer 2

这是一种在单击一行后插入一行的方法。新行将在单击的行之后立即添加，因此可以在不同位置添加新行。

我们来看看它：

首先，我们在表上设置一个事件侦听器，以侦听对行元素的单击。单击某行后，我们调用appendRow方法来添加新行，并将索引传递到希望该行出现的位置。

我们在这里使用委托，因此动态添加的行将包含在事件侦听器中。

appendRow方法在已定义的索引处添加了新行，然后添加了一些表单元用于演示。

var tableEl = document.getElementById('table');
tableEl.addEventListener('click', function(event) {
  var el = event.target;
  if (el.closest('tr') && el.closest('tbody')) {
    var trow = el.parentElement;
    var tbody = trow.parentElement;
    var index = Array.prototype.indexOf.call(tbody.children, trow);
    appendRow(tbody, index + 1);
  }
});

function appendRow(tbody, index) {
  var row = tbody.insertRow(index);
  var cells = ['A', 'B', 'C'];
  cells.forEach(function(cell, idx) {
    var newCell = row.insertCell(idx);
    var newText = document.createTextNode(`Row ${index} - ${cell}`);
    newCell.appendChild(newText);
  });
}

table {
  table-layout: fixed;
  width: 100%;
}

td {
  border: 1px solid gray;
}

<table id="table">
  <thead>
    <tr>
      <th>A</th>
      <th>B</th>
      <th>C</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>A</td>
      <td>B</td>
      <td>C</td>
    </tr>
  </tbody>
</table>

如何在特定索引处添加表行和列

2 个答案: