在 <td> 行下方添加元素答案

【问题标题】：Add elements below row <td>在 <td> 行下方添加元素
【发布时间】：2019-04-04 08:01:20
【问题描述】：

在我的 angularjs 应用程序中有一行（使用 ng-repeat），通过 . 创建行的代码如下：

<tbody>
    <tr ng-repeat="data in downloads">
        <td data-title="ID">{{$index + 1}}</td>



        <td data-title="User">{{data.user_name}}</td>
        <td data-title="Issue">{{data.download_name}}</td>
        <td data-title="Progress">{{data.size}}</td>

        <td data-title="Completed time" am-time-ago="data.completed_time|amFromUnix"</td>
        <td class="information-parent" data-title="More">
            <md-icon ng-click="switchIcon()" class="bassa-red-color">{{icon}}</md-icon
        </td>
    </tr>
</tbody>

我正在尝试实现一些功能，当您单击箭头时，该行会扩展并显示如下信息：但是，我无法让信息像那样出现在底部。我应该尝试实现什么来获取底部的文本 - flex box，inline-box？

【问题讨论】：

标签： html css angularjs html-table

【解决方案1】：

看看Bootstrap collapse.js。我认为这就是您要寻找的东西，当然，您必须对其进行更改以满足您的需求。

【讨论】：

我正在尝试在不导入任何外部文件的情况下执行此操作。我还不介意动画。我只是坚持让文本出现在沿行的底部
@Ben10 你可以使用 javascript 函数来切换显示。如果你不想添加我不知道的javascript。
我只是在尝试制作原型
所以我没有进入花哨的 js（静态 HTML 很好），我希望在其他所有内容下方的行底部放置文本，就像在 gif 中一样
当我尝试实现相同的事情时，它与行对齐，但不在下方

【解决方案2】：

为您的场景尝试以下代码。

(function(ng, app){

    app = angular.module('app', [])

    app.controller("mainController", ['$scope',
      function($scope) {
        $scope.downloads = [{
            "user_name": "John",
            "download_name": "Doe jhonejhonejhone",
            "size": "0 byte"
          },
          {
            "user_name": "Anna",
            "download_name": "Doe DoeDoeDoeDoe",
            "size": "0 byte"
          },
          {
            "user_name": "Maron",
            "download_name": "Anna DoeDoeDoeDoeDoe",
            "size": "5 byte"
          }
        ];

        $scope.editFiles = function() {
          $scope.editBar = true;
        };

        $scope.remove = function(index) {
          $scope.downloads.splice(index, 1);
        };

      }
    ]);

}(angular));

.btn-primary{
    margin-right: 10px;
}

<html ng-app="app">

<head>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

  <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
  <link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
  <script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/js/bootstrap.min.js"></script>

</head>

<body>
  <div class="container" ng-controller="mainController">
    <div class="row">
      <div class="col-md-12">
        <input type="submit" class="btn btn-primary addnew pull-left" value="Edit Files" ng-click="editFiles()">
      </div>
    </div>

    <div class="row">
      <div class="col-md-12">
        <div class="panel panel-default">
          <div class="panel-body">
            <form>
              <table border=1 class="table table-striped table-bordered">
                <thead>
                  <tr>
                    <th>
                      <b> # </b>
                    </th>
                    <th>User</th>
                    <th>Download Name</th>
                    <th>Complete Name</th>
                  </tr>
                </thead>
                <tbody>
                  <tr ng-repeat="data in downloads">
                    <td>
                      <b> {{$index + 1}} </b>
                    </td>
                    <td>
                      {{data.user_name}}                   
                    </td>
                    <td>
                      {{data.download_name}}
                      
                      <div class="btn-group pull-right" ng-show="editBar">
                        <button class="btn btn-primary btn-xs"><span class="glyphicon glyphicon-pencil"></span></button>
                        <button class="btn btn-danger btn-xs"><span class="glyphicon glyphicon-trash" ng-click="remove($index)"></span></button>
                      </div>
                      
                    </td>
                    <td>
                      {{data.size}}
                    </td>
                  </tr>
                </tbody>
              </table>

            </form>
          </div>
        </div>
      </div>
    </div>
  </div>
</body>

</html>

【讨论】：

【解决方案3】：

您可以尝试以下方法：

将您的 ng-repeat 移至您的身体
将 ng-init="data.showSubRow = false" 添加到您的 tbody 中
向 tbody 添加另一行，仅当 showSubRow 为 true 时才可见

所以你的 ng-repeat 看起来像

<tbody ng-repeat="data in downloads" ng-init="data.showSubRow = false">
    <tr>
        visible row
    </tr>
    <tr ng-show="data.showSubRow">
        visible when clicked
    </tr>
</tbody>

现在您可以在每行中添加单独的按钮来显示/隐藏单独行上的内容，或者添加编辑所有功能以使所有子行可见

显示/隐藏单个行

   <tr>
        <td data-title="ID">
            {{$index + 1}
            <span>
                <button ng-show="!data.showSubRow" ng-click="data.showSubRow = true">+</button>
                <button ng-show="data.showSubRow" ng-click="data.showSubRow = false">-</button>
            </span>
        </td>
        <td data-title="User">{{data.user_name}}</td>
        <td data-title="Issue">{{data.download_name}}</td>
        <td data-title="Progress">{{data.size}}</td>

        <td data-title="Completed time" am-time-ago="data.completed_time|amFromUnix"</td>
        <td class="information-parent" data-title="More">
            <md-icon ng-click="switchIcon()" class="bassa-red-color">{{icon}}</md-icon
        </td>
    </tr>

全部显示

  $scope.editAll = function(){
    angular.forEach($scope.downloads, function(value, key) {
      value.showSubRow = !value.showSubRow;
    });
  }

工作示例----> Demo

【讨论】：