Question

我正在尝试创建一个通过Angular绑定其数据的表。我的任务是在每行添加一个铅笔glyphicon，以显示该行是可编辑的。我遇到的问题是，如果我使用bootstrap table-striped类并添加glyphicon glyphicon-pencil类，似乎行坐在glyphicon后面，问题是整个行是可点击的但是glyphicon。如果我添加一个style =“z-index：-1”，那么铅笔只显示在白色的行而不是灰色的行上？我已经进行了尝试并且尝试了我能想到的所有内容，而且我似乎无法使用z-index来显示交替行上的glyphicon，这使得glyphicon可以点击。上面一行中的所有内容都需要是可点击的。（我需要能够点击铅笔和/或网格并将其传递到下一个视图。）

有人可以帮忙解释一下我是如何才能正常工作的吗？解释可能发生的事情？在这一点上我完全不知所措。

这是我的HTML代码

<div ng-controller="TestCtrl">
    <div class="container" ng-hide="editing" style="margin-top:25px;">
     <div class="row">
            <div id="no-more-tables">
                <table ng-show="test.length > 0" class="col-sm-10 col-sm-offset-1 table-bordered table-striped table-condensed cf">
                    <thead style="text-align:left">
                        <tr>
                            <th style="width: 27px;"></th>
                            <th>Field 1</th>
                            <th>Field 2</th>
                            <th>Field 3</th>
                            <th>Field 4</th>
                            <th>Field 5</th>
                            <th>Field 6</th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr id="{{test.guidfield}}" ng-repeat="testing in test" ng-click="edit($event)" style="cursor:pointer">
                            <td><div class="glyphicon glyphicon-pencil" style="z-index:-1"></div></td>
                            <td data-title="Field 1"> {{test.field1}}</td>
                            <td data-title="Field 2">{{test.field2}}</td>
                            <td data-title="Field 3">{{test.field3}}</td>
                            <td data-title="Field 4">{{test.field4}}</td>
                            <td data-title="Field 5">{{test.field5}}</td>
                            <td data-title="Field 6">{{test.field16}</td>
                        </tr>
                    </tbody>
                </table>
            </div>
        </div>
    </div>

这是我拥有的CSS

  /* ------- this media query makes tables display vertically on devices 768px or less  ------ */

    /* Force table to not be like tables anymore */
    #no-more-tables table, #no-more-tables thead, #no-more-tables tbody, #no-more-tables th,
    #no-more-tables td, #no-more-tables tr {
        display: block;
    }

    /* Hide table headers (but not display: none;, for accessibility) */
    #no-more-tables thead tr {
        position: absolute;
        top: -9999px;
        left: -9999px;
    }

    #no-more-tables tr {
        border: 1px solid #ccc;
    }

    #no-more-tables td {
        /* Behave  like a "row" */
        border: none;
        border-bottom: 1px solid #eee;
        position: relative;
        padding-left: 60%;
        white-space: normal;
        text-align: right;
        height: 30px;
    }

    #no-more-tables td:before {
        /* Now like a table header */
        position: absolute;
        /* Top/left values mimic padding */
        top: 6px;
        left: 6px;
        width: 45%;
        padding-right: 10px;
        white-space: nowrap;
        text-align: left;
        font-weight: bold;
    }

    /*  Label the data  */
    #no-more-tables td:before {
        content: attr(data-title);
    }

    .table-bordered {
        border: none;
    }

Answer 1

使用此：

 <td><i class="glyphicon glyphicon-pencil" style="z-index:1"></i></td>

Answer 2

我确实发现ng-click中有一些东西导致它不起作用。谢谢大家的帮助:)）

交替行上的Glyphicon问题消失了

2 个答案: