Как я могу создать расширенную таблицу, используя HTML и JS? - PullRequest
Новая
       1

Как я могу создать расширенную таблицу, используя HTML и JS?

0 голосов
/ 09 ноября 2018

Я хочу создать расширяемую таблицу, в которой будет один заголовок со значком плюса для расширения, а дочерний элемент будет отображаться в развернутой части.

enter link description here

Я могу создать это, но дочерние строки не находятся ниже границы родительской строки, что происходит, потому что я использую таблицу внутри родительского td. Так есть ли лучший способ использовать. 

var app = angular.module('plunker', []);

app.controller('MainCtrl', function($scope) {
  $scope.name = 'World';
  $scope.carList = [{
    review: 'New',
    rating: 5,
    fiveStarPercent: 100,
    recommended: 'yes',
    price: '$1,000,000',
    name: 'Row 1',
    descrt: [{
      name:'Clild 1',
      review: 'New',
      rating: 5,
      description: 'test 1',
      card: 'N',
      gift: '$1,565,650'
    }, {
      name:'Clild 2',
      review: 'New',
      rating: 5,
      description: 'test 2',
      card: 'N',
      gift: '$1,554,540'
    }, {
      name:'Clild 3',
      rating: 5,
      review: 'New',
      description: 'test 3',
      card: 'Y',
      gift: '$1,444,450'
    }]
  }, {
    review: 'Poor',
    rating: 1,
    fiveStarPercent: 10,
    recommended: 'no',
    price: '$5',
    name: 'Row 2',
    descrt: [{
      name:'Clild 1',
      review: 'New',
      description: 'test ',
      card: 'N',
      rating: 5,
      gift: '$1,025,655'
    }, {
      name:'Clild 2',
      review: 'New',
      description: 'test 2',
      card: 'Y',
      rating: 5,
      gift: '$1,545,454'
    }]

  }];
});
tr {
  cursor: pointer;
}
tr.trigger:hover td {
  background-color: #ffc !important;
}
table, th, td {
    border: 1px solid black;
    border-collapse: collapse;
}
<script src="//unpkg.com/angular/angular.js"></script>
<body ng-app="plunker" ng-controller="MainCtrl">
  <p>Hello {{name}}!</p>
  <table class="table table-striped table-bordered">
    <thead>
      <tr>
        <th>Name</th>
        <th>Status</th>
        <th>Cost</th>
        <th>Items</th>
        <th>Card</th>
        <th>Cost</th>
      </tr>
    </thead>
    <tbody>
      <tr class="trigger" ng-repeat-start="car in carList | filter:tableFilter" ng-click="main.activeRow = !main.activeRow">
    <td><a href="#">+</a><span style="padding:4px;">{{car.name}}</span></td>
    <td>{{car.review}}</td>
    <td>{{car.rating}}</td>
    <td>{{car.fiveStarPercent}}</td>
    <td>{{car.recommended}}</td>
    <td>{{car.price}}</td>
</tr>
<tr ng-repeat-end ng-show="main.activeRow" ng-repeat="subling in car.descrt">
    <td>{{subling.name}}</td>
    <td>{{subling.rating}}</td>
    <td>{{subling.review}}</td>
    <td>{{subling.description}}</td>
    <td>{{subling.card}}</td>
    <td>{{subling.gift}}</td>
</tr>
    </tbody>
  </table>
</body>

Это ссылочный URL: plunker

1 Ответ

0 голосов
/ 09 ноября 2018

Избегайте вложенных таблиц, так что помогут проблемы, связанные с td width 

<tr class="trigger" ng-repeat-start="car in carList | filter:tableFilter" ng-click="main.activeRow = !main.activeRow">
    <td><a href="#">+</a><span style="padding:4px;">{{car.name}}</span></td>
    <td>{{car.review}}</td>
    <td>{{car.rating}}</td>
    <td>{{car.fiveStarPercent}}</td>
    <td>{{car.recommended}}</td>
    <td>{{car.price}}</td>
</tr>
<tr ng-repeat-end ng-show="main.activeRow" ng-repeat="subling in car.descrt">
    <td>{{subling.name}}</td>
    <td>{{subling.rating}}</td>
    <td>{{subling.review}}</td>
    <td>{{subling.description}}</td>
    <td>{{subling.card}}</td>
    <td>{{subling.gift}}</td>
</tr>

Демо Здесь

Я не был уверен, что ng-repeat и ng-repeat-end будут работать вместе, но они сделали.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...