交替行上的字形图标问题消失了

Question

我正在尝试创建一个通过 Angular 绑定其数据的表。我的任务是为每一行添加一个铅笔字形图标，以表明该行是可编辑的。我遇到的问题是，如果我使用引导表条带类并添加 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 中有一些东西导致它不起作用。谢谢大家的帮助:)