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

Question

我在表中编写了一个添加/删除行的函数，但问题是在添加一行之后，表的CSS属性没有正确通过。因为我的输入字段不在单元格的中心。

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

我的代码是：

＆＃13;

＆＃13;

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);
}

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;

请查看其在我的信息中心中的显示方式。请注意，我使用的是Bootstrap表。

Answer 1

您的表格中缺少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 add class =“no-padding”（确保为此创建一个类！）并确保将类添加到您所在的每个新td中添加

Answer 2

为每个表数据标记指定一个类似的类名，并在该类的css中添加该属性：

text-align: center;