Question

在此处使用带有bootstrap 3的angularjs。

当用户单击按钮时，我正在尝试创建动态行。我已经将其包装在表格中并使用ng-repeat。

添加第二行后，将在两者之间创建一个分隔线。

下面是我的代码：

<table class="table table-borderless">
    <thead>
      <tr>
        <td>Text</td>
        <td>Value</td>
      </tr>
    </thead>
    <tbody ng-repeat="m in options">

      <tr>
        <td>{{m.Name}}</td>
        <td>{{m.Country}}</td>
        <td>
          <a class="btn btn-xs" ng-click="Remove($index)"><i class="glyphicon glyphicon-trash"></i></a>
        </td>
      </tr>
    </tbody>
    <tfoot>
      <tr>
        <td>
          <input type="text" class="form-control" ng-model="Name" required />
        </td>
        <td>
          <input type="text" class="form-control" ng-model="Country" required />
        </td>
        <td>
          <a class="btn btn-xs" ng-click="Add()"><i class="glyphicon glyphicon-plus"></i></a>
        </td>
      </tr>
    </tfoot>
  </table>

我还在以下位置创建了一个演示： http://jsfiddle.net/Lyxbhosv/

关于如何删除两个TD之间的线或边界的任何输入

Answer 1

我不确定您要问什么，但是通过您的示例，每当添加另一行时，就会出现一个双边框。要删除双边框并使其保持单个，只需使用以下命令修改代码：

<tbody ng-repeat="m in options" style="border: none;">

如果您可以进一步解释，那就太好了！

Answer 2

虽然我正在检查您的代码，但您已经授予了答案。但在这里，我想出了我从您的代码中学到的知识以及以下答案：

<tbody ng-repeat="m in options" style="border: none;">这将在您的代码中创建很多可重复的'。

但是如果您每次都将代码'ng-repeat =“ m in options”'放置到子<tr>' tag it will repeat the`上。并且不会再创建任何可重复的边框。

<tbody>
    <tr ng-repeat="m in options">

所以选择是你的！

CSS：无边框的表格和TD

2 个答案: