条带引导表:如何仅为1列更改条纹背景颜色?

Posted

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了条带引导表:如何仅为1列更改条纹背景颜色?相关的知识,希望对你有一定的参考价值。

我和Bootstrap table striped: How do I change the stripe background colour?有类似的问题。但主要区别在于我想仅为一列改变颜色的交替。 这是我的ng-table的cose,我想用标题'Srv'改变第一列的背景颜色

<table ng-table="fondiTable_C" class="table table-condensed table-bordered table-striped" template-pagination="app/components/gestioneFondi/pagerTemplate.html">
                <tr ng-repeat="fondo in data_C">    
                    <td class="i9fontPre text-center" data-title="'Srv'" header-class="'i9header'">{{::fondo.area}}</td>
                    <td class="i9fontPre text-left" data-title="'Chiave IB'" header-class="'i9header'">{{::fondo | formatChiave}}</td>  
                    <td class="i9font text-center" data-title="'Stato Pratica'" header-class="'i9header'">{{::fondo.stato}}</td>
                    <td class="i9font text-center" data-title="'Flag S/V'" header-class="'i9header'">{{::fondo.fvs}}</td>
                    <td class="i9font text-right" data-title="'Fondo bucket&nbsp;1 (EUR)'" header-class="'i9header'">{{::fondo.fnd1 | number:2}}</td>
                    <td class="i9font text-right" data-title="'Fondo bucket&nbsp;2 (EUR)'" header-class="'i9header'">{{::fondo.fnd2 | number:2}}</td>
                    <td class="i9font text-center" data-title="'Bucket'" header-class="'i9header'">{{::fondo.bktDH}}</td>
                    <td class="i9font text-right" data-title="'Fondo IFRS9 (EUR)'" header-class="'i9header'">{{::fondo.fndDH | number:2}}</td>
                    <td class="i9font text-center" data-title="'Rapporto'" header-class="'i9header'">{{::fondo | formatRapporto}}</td>
                    <td class="i9font text-center" data-title="'Cdg'" header-class="'i9header'">{{::fondo.cdg | formatCdg}}</td>
                    <td class="i9font text-center" data-title="'FT'" header-class="'i9header'">{{::fondo.fTec}}</td>
                </tr>
            </table>

你可以帮帮我吗?先感谢您

答案

您可以使用ngClass有条件地将样式应用于特定单元格,ngRepeat将为每一行重新绘制它。

像这样的东西

<tr ng-repeat="unit in data">
  <td ng-class="{'highlight': selected==='name'}">{{unit.name}}</td>
  <td ng-class="{'highlight': selected==='model'}">{{unit.model}}</td>
  <td ng-class="{'highlight': selected==='price'}">{{unit.price}}</td>
</tr>

根据selected的价值,td将适用highlight

Here's a demo

以上是关于条带引导表:如何仅为1列更改条纹背景颜色?的主要内容,如果未能解决你的问题,请参考以下文章

Bootstrap 表条纹:如何更改条纹背景颜色?

如何在引导程序中更改面板主体背景颜色?

AlertDialog 更改片段中的背景颜色 [重复]

如何从片段更改 Tablayout 的背景颜色?

如何使用 PaginatedDataTable 更改列的背景颜色

使用 jQuery 从表条带化中排除嵌套表