代码之家 › 专栏 › 技术社区 › Naomi

CSS禁用了表的列背景色和表中所选行的输入

angularjs css html javascript

Naomi · 技术社区 · 7 年前

我会提前说CSS是我最薄弱的一点。我用以下ng repeat语句创建了一个angularjs表:

 <table id="lineItemsTable"
                           class="table table-bordered table-hover table-list scroll">
                        <thead>
                            <tr>
                                <th>@Labels.itemId</th>
                                <th>@Labels.nickname</th>
                                <th>@Labels.description</th>
                                <th class="text-right">@Labels.quantity</th>
                                <th ng-if="crud.model.adjType>=0">@Labels.location</th>
                                <th ng-if="crud.model.adjType<0">@Labels.cost</th>
                                <th>&nbsp;</th>
                            </tr>
                        </thead>
                        <tbody>
                            <tr ng-repeat-start="result in crud.model.lineItems track by $index"
                                ng-form="lineItemForm"
                                ng-click="crud.selectedMatrixIndex=-1;crud.selectedIndex=$index;"
                                ng-class="{selected: $index === crud.selectedIndex}">

因此,我的网格(表)中的选定行使用此CSS类以蓝色突出显示:

    .table-list > tbody > tr.selected td {
        background: rgba(204, 229, 255, 1);
    }

此外,在同一个表中,我使用以下HTML创建了禁用的成本:

<td>                                
                                    <input type="number" name="cost" 
                                           ng-if="crud.model.adjType<0"
                                           ng-model="result.unitCost"
                                           data-sm:number-format
                                           data-accuracy="2"
                                           data-sm:number
                                           ng-disabled="true"
                                           ng-class="{'smYellow' : (result.unitCost>0 && result.costOverride === true), 'smOrange': result.unitCost===0 }"
                                           class="form-control form-control-sm text-right">
                                </td>

其中smyellow类如下:

.smYellow {
    fill: #faf37e;
    fill-opacity: 0.4;
    stroke: #faf37e;
    stroke-width: 3;
    background-color: rgba(250,243,126, 0.40) !important;
}

我在这里遇到的问题是,当行没有突出显示时,我的黄色看起来很好。但是,当行突出显示时,我看到绿色(蓝色+黄色)。我想知道是否有一个CSS技巧或一些巧妙的解决方案来解决这个问题,这样当行突出显示或不突出显示时,我的颜色看起来是一样的(或者,至少,比绿色更黄)。

我会感激你的任何想法。

更新。尝试了建议的想法,但仍然看到绿色-我做错了什么?

.smOrange {
    fill: #F58025;
    fill-opacity: 0.4;
    stroke: #F58025;
    stroke-width: 3;
    background-color: rgba(245, 128, 37, 0.40) !important;
}

.smYellow {
    fill: #faf37e;
    fill-opacity: 0.4;
    stroke: #faf37e;
    stroke-width: 3;
    background-color: rgba(250,243,126, 0.40) !important;
}

.table-list > tbody > tr.selected td > input.smYellow {
    background-color: rgba(250,243,126, 1);
    fill-opacity: 1;
}
.table-list > tbody > tr.selected td > input.smOrange {
    background-color: rgba(245, 128, 37, 1);
    fill-opacity: 1;
}

2 回复 | 直到 7 年前

Pop-A-Stash 7 年前

选择行时看到绿色的原因是,您将输入的背景设置为40%不透明度(alpha),而蓝色背景正在穿透:

    .smYellow {
      background-color: rgba(250,243,126, 0.40);  // R,G,B,alpha
    }

因为蓝色+黄色=绿色,绿色就是你看到的。将不透明度(alpha)设置为100%,无论选择什么,您都应该看到输入的纯黄色:

    .smYellow {
      background-color: rgba(250,243,126, 1);    // R,G,B,alpha
    }

或者,您可以制定另一个更具体的规则,以便在选定行时设置不同的颜色:

    .table-list > tbody > tr.selected td > input.smYellow{
      background-color: rgba(250,243,126, 0.4); // put your new matching color here
    }

这将要求您删除 !important 你的陈述 smYellow 规则。

Naomi 7 年前

这是我最后的解决方案,似乎效果很好。我保持原样。

再次感谢您的帮助:

.smOrange {
    fill: #F58025;
    fill-opacity: 0.4;
    stroke: #F58025;
    stroke-width: 3;
    background-color: rgba(245, 128, 37, 0.40) !important;    
}

.smYellow {
    fill: #faf37e;
    fill-opacity: 0.4;
    stroke: #faf37e;
    stroke-width: 3;
    background-color: rgba(250,243,126, 0.40) !important;
}

.table-list > tbody > tr.selected td > input.smYellow {
    background-color: rgba(250,243,126, 0.60) !important;
}

.table-list > tbody > tr.selected td > input.smOrange {
    background-color: rgba(245, 128, 37, 0.60) !important;
}