如何在有手风琴的桌子中添加斑马效果

Question

如何在每行中有手风琴的表格中创建斑马效果？如果我展开或折叠手风琴，斑马效应的变化应该相应改变。

我的表结构有点像这样：

  <div style="padding:0%;min-height:650px;">
    <div class="tab-content">
        <div id="0" class="tab-pane fade in active">
             <div class="table-responsive">
                 <table class="jh-table jh-homeReg table table-striped">
                    <thead>
                    <tr>
                        <th style="width:1%;" class="ng-scope">
                        <a>View</a>
                        </th>
                        <th class="ng-scope">Id
                            <span class="glyphicon sort-icon" ng-show="sortKey=='id'"
                                  ng-class="{'glyphicon-chevron-up':reverse,'glyphicon-chevron-down':!reverse}"></span>
                        </th>
                        <th class="ng-scope">Name
                            <span class="glyphicon sort-icon" ng-show="sortKey=='name'"
                                  ng-class="{'glyphicon-chevron-up':reverse,'glyphicon-chevron-down':!reverse}"></span>
                        </th>

                        <th class="ng-scope">Address
                            <span class="glyphicon sort-icon" ng-show="sortKey=='address'"
                                  ng-class="{'glyphicon-chevron-up':reverse,'glyphicon-chevron-down':!reverse}"></span>
                        </th>

                        <th class="ng-scope">Email
                            <span class="glyphicon sort-icon" ng-show="sortKey=='email'"
                                  ng-class="{'glyphicon-chevron-up':reverse,'glyphicon-chevron-down':!reverse}"></span>
                        </th>

                    </tr>
                    </thead>
                    <tbody>
                    <tr class="ng-scope"
                        dir-paginate-start="vm.model|filter:search | orderBy:sortKey:reverse) | itemsPerPage: 2)"
                        ng-click="showDetail(obj)" ng-class-odd="'alt'">
                        <td><i ng-hide="active==obj.id" class="fa fa-plus"></i>
                            <i ng-show="active==obj.id" class="fa fa-minus"></i></td>
                        <td class="ng-scope">{{obj.id}}</td>
                        <td class="ng-scope">{{obj.name}}</td>
                        <td class="ng-scope">{{obj.address}}</td>
                        <td class="ng-scope">{{obj.email}}</td> 
                    </tr>
                    <tr dir-paginate-end="" ng-show="active==obj.id" ng-class-odd="'alt'">
                        <td colspan="5">
                            <ul class="nav nav-tabs">

                            </ul>
                            <div class="tab-content">                               

                            </div>
                        </td>
                    </tr>
                    </tbody>
                </table>
            </div>
            <div class="text-center">
                <dir-pagination-controls boundary-links="true" on-page-change="pageChangeHandler(newPageNumber)"
                                         template-url="/templates/dirPagination.tpl.html">
                </dir-pagination-controls>
                <div class="text-center">
                    <pre ng-show="showTotalResults" class="ng-binding">Total Results:{{(vm.model|filter:search).length}}</pre>
                </div>
            </div>
        </div>
    </div>
</div>