交替行上的象形符号问题消失

Question

我正在尝试创建一个通过Angular绑定其数据的表。我的任务是向每行添加一个铅笔字形图标，以显示该行是可编辑的。我遇到的问题是，如果我使用引导表条纹类并添加glyphicon glyphicon-pencil类，似乎行坐在glyphicon后面，问题是这是整个行是可点击的，但glyphicon。如果我添加style="z-index:-1"铅笔只显示在白色的行，而不是灰色的?我已经战斗并尝试了我能想到的一切，但我似乎无法使用z-index让字形图标显示在交替行上，这确实使字形图标可点击。上面一行中的所有内容都需要是可点击的。(我需要能够点击铅笔和或网格，并有它传递到下一个视图。)

有人能帮我解释一下如何才能使这个工作正确吗?解释可能发生的事情?在这一点上我完全不知道。

这是我的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中有一些东西导致这个不工作。谢谢大家的帮助