Question

我有一个html表，我在下面的图像中设置了行marge。 enter image description here

选择第二行时，我的选择无效。见下文.. enter image description here

但是我要在第二行设置选择，我希望如下...... enter image description here

css怎么可能。我使用了bootstrap css。

// ==表

.table {
    min-width: 100%;
    margin-bottom: 0px;
    border-spacing: 0;
    background: #fff;
    margin:0px;
    table-layout: fixed;

    //fit to screen
    @include breakpoint(small) {
        table-layout: auto;

        &.table-blank {
            display: none;
        }
    }

    > thead > tr > th,
    > tbody > tr > td {
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    > tbody > tr > td {
        height: element-height();
        margin: 0;
        padding-bottom: 0;
        padding-top: 0;
        vertical-align: middle;
    }

    // Bottom align for column headings
    > thead > tr > th {
        background: $table-header-color;
    }

  // Remove top border from thead by default
    > caption + thead,
    > colgroup + thead,
    > thead:first-child {
        > tr:first-child {
            > th {
                background: $table-header-color;
                color: $light-color;
            }
        }
    }

    //button group into table
    .table-link-group {
        margin-left: 0;
        margin-bottom: 0;
        list-style: none;
        width: 100%;
        white-space: nowrap;
        overflow: hidden;
        text-align: center;

        li {
            display: inline-block;
            float: none;
        }
        &:before {
            display: table;
            content: "";
        }
        &:after {
            display: table;
            content: "";
            clear: both;
        }
        a {
            padding: 0 5px;
            text-decoration: none;
            border: none;
            &:hover {
                background-color: #f5f5f5;
            }
        }
    }

    // Baseline styles
    // Zebra-striping
    // Default zebra-stripe styles (alternating gray and transparent backgrounds)
    .table-striped > tbody > tr:nth-child(odd) > td {
        background-color: #f5f5f5;
    }

    // Hover effect
    // Placed here since it has to come after the potential zebra striping
    .table-hover > tbody > tr:hover > td {
        background-color: #d7d7d7;
        //color:#eeeeee;
    }

    //selected row color
    .selected-row td {
        background-color: #d7d7d7 !important;
        color: #101010;
        cursor: pointer;
    }

    //no cell padding
    .no-cell-padding {
        padding: 0
    }

    //outside border less lable
    .table {
        border-collapse: collapse;
        border: 0;

        //no border top and bottom header row
        > thead > tr {
            &:first-child > th {
                border-top: 0;
                border-left: 0;
            }
            &:last-child > th {
                border-bottom: 0;
                &:last-child {
                    border-right: 0;
                }
            }
        }

        //no border top and bottom  row
        > tbody > tr {
            &:first-child > td {
                border-top: 0;
            }
            &:last-child > td {
                border-bottom: 0;
            }
            > td {
                border-left: 0;
                background: #fff;
                &:last-child {
                    border-right: 0;
                }
            }
        }
    }
}

.table-responsive {
    //height:100%;
    //min-height: 100%;
    //max-height: 100%;
    overflow-x: hidden;
    overflow-y:auto;
    margin-bottom: 0;
    //height: 200px;

    //Fit to screen
    @include breakpoint(small) {
        //height:auto;
        //min-height: auto;
        overflow-x: auto;
    }
}

.fixed-headers {
    thead {
        tr {
            display: block;
            position: relative;
        }
    }
    tbody {
        display: block;
        overflow-y: scroll;
        height: 200px;
    }
}

HTML：

 <div class="panel" ng-class="{'panel-default': !isModal}" fitmodal="70%">
        <div data-ng-show="!isModal" class="panel-heading">Item List</div>
           <div ng-class="{'panel-body': !isModal}">
            <div class="table-responsive">
                <table
                    ni-grid="gridOptions"
                    class="table table-striped table-bordered table-hover">
                    <thead>
                        <tr>
                            <th style="width: 25%;">{{longfht.itemname}}</th>
                            <th style="width: 55%;" class="no-cell-padding">
                                <table class="table table-striped table-bordered table-hover">
                                    <thead>
                                        <tr>
                                            <th style="width: 100%;">{{longfht.permitarea}}</th>
                                        </tr>
                                    </thead>
                                </table>
                            </th>
                            <th style="width: 10%;">{{longfht.active}}</th>
                            <th style="width: 10%;"></th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr data-ng-repeat="item in gridData" animate-on-error='item.onError' tooltip-append-to-body="true" tooltip="{{errorTooltip}}">
                            <td style="width: 25%;">{{ item.itemName }}</td>
                            <td style="width: 55%;" class="no-cell-padding">
                                <table class="table table-bordered table-striped table-hover">
                                    <tbody>
                                        <tr data-ng-repeat="itemModule in item.setModuleList" ng-show="itemModule.isShowRow">
                                            <td style="width: 100%;" id="tdOrderNo">{{ itemModule.moduleName }}</td>
                                        </tr>
                                    </tbody>
                                </table>
                            </td>
                            <td style="width: 10%;">{{ item.isActive|niBoolean  }}</td>
                            <td style="width: 10%;">

                                <ul class="table-link-group">
                                    <li><a href="javascript:void(0)" data-ng-click="editItem(item)"><i class="fa fa-edit"></i></a></li>
                                    <li><a href="javascript:void(0)" data-ng-click="deleteItem(item)"><i class="fa fa-trash-o"></i></a></li>
                                    <li><a href="javascript:void(0)" data-ng-show="isModal" data-ng-disabled="!item.isActive" data-ng-click="selectItem(item)"><i class="fa fa-check-square-o"></i></a></li>
                                </ul>

                            </td>
                        </tr>

                    </tbody>
                </table>
            </div>
        </div>

JS：

var selectEvent = function (event) {

                                    event = event || window.event;
                                    event.stopPropagation();
                                    //event.preventDefault();

                                    //get target closest tr
                                    var getTrParams = function (parameters) {
                                        var node = parameters[0].nodeName.toLowerCase() != 'tr' ? parameters.parent() : parameters;
                                        if (node[0].nodeName.toLowerCase() != 'tr') {
                                            return getTrParams(node);
                                        } else {
                                            return node;
                                        }
                                    }


                                        //if target row contain previos selection then remove such selection
                                        var isClassExist = false;
                                        var targetTd = angular.element(event.target);

                                        //get target tr
                                        var targetTr = getTrParams(targetTd); //targetTd.nodeName targetTd.parent();
                                        if (targetTr.hasClass('selected-row')) {
                                            targetTr.removeClass('selected-row');
                                            isClassExist = true;
                                        }
                                        //if another row contain selection then remove their selection but if control button pressed then it will not work
                                        var closesedTable = iElement.find('tr');
                                        if (closesedTable.length > 0) {
                                            if (!event.ctrlKey) {
                                                for (var i = 0; i < closesedTable.length; i++) {
                                                    var eachRow = angular.element(closesedTable[i]);
                                                    if (eachRow.hasClass('selected-row')) {
                                                        eachRow.removeClass('selected-row');
                                                    }
                                                }

                                            }
                                        }
                                        //set selection 
                                        if (!isClassExist) {
                                            targetTr.addClass('selected-row');
                                        }
}

如何在合并表行中设置选择或悬停效果

0 个答案: