html - 交替行上的 Glyphicon 问题消失

Question

我正在尝试创建一个通过 Angular 绑定(bind)其数据的表。我的任务是在每一行中添加一个铅笔字形图标，以表明该行是可编辑的。我遇到的问题是，如果我使用 bootstrap table-striped 类并添加 glyphicon glyphicon-pencil 类，它似乎该行位于 glyphicon 后面，问题是整行都是可点击的，但 glyphicon.如果我添加一个 style="z-index:-1"铅笔只出现在白色的行上而不是灰色的？我已经尝试过所有我能想到的东西，但我似乎无法使用 z-index 使字形图标显示在交替的行上，这确实使字形图标可点击。上一行中的所有内容都必须是可点击的。 (我需要能够单击铅笔和/或网格并将其传递到下一个 View 。)

有人可以帮助解释我如何才能使它正常工作吗？解释可能会发生什么？在这一点上我完全不知所措。

这是我的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>