使用 JavaScript 在表中添加和删除行

Question

我已经为表格中的添加/删除行编写了一个函数，但问题是添加一行后，表格的 CSS 属性无法正常通过。正如我的输入字段没有进入单元格的中心。

在第一行中，它显示在单元格的中心（因为它是硬编码的），但是当我使用我的函数创建一行时，输入字段显示在单元格的左侧。

我的代码是：

function deleteRow(row) {
  var i = row.parentNode.parentNode.rowIndex;
  document.getElementById('POITable').deleteRow(i);
}

function insRow() {
  //$('#myModal').modal('toggle');
  var x = document.getElementById('POITable');
  var new_row = x.rows[1].cloneNode(true);
  var len = x.rows.length;
  // new_row.cells[0].innerHTML = len;
  var inp1 = new_row.cells[1].getElementsByTagName('input')[0];
  inp1.id += len;
  inp1.value = '';
  x.appendChild(new_row);
}

<table id="POITable" data-toggle="table">
  <tr>
    <th>colmn1</th>
    <th>colmn1</th>
  </tr>
  <tbody>
    <td><input type="text"></td>
    <td><input type="text"></td>
    <td><a onclick="insRow()" id="addmorePOI">Add row</a></td>
    <td><a onclick="deleteRow(this);" id="addmorePOI">Remove row</a></td>
  </tbody>
</table>

请查看它在我的仪表板中的显示方式。请注意，我使用的是 Bootstrap 表。

Answer 1

给每个表数据标签一个类似的类名，并在该类的css中添加属性：

text-align: center; 

Answer 2

您的表格正文中缺少 TR 标签。应该是：

<tbody>
    <tr>
        <td><input type="text"></td>
        <td><input type="text"></td>
        <td><a onclick="insRow()" id="addmorePOI">Add row</a></td>
        <td><a onclick="deleteRow(this);" id="addmorePOI">Remove row</a>
       </td>
    </tr>
</tbody>

看起来你有一些来自某个地方的填充。您需要检查新添加元素上的 dom。我注意到您的其他单元格的填充为 0。尝试将 cellpadding="0" 添加到表格标签或在每个 td 添加 class="no-padding" （一定要为此创建一个类！）并确保该类被添加到您连续添加的每个新 td添加