突出显示表格行或列的备用颜色

本文介绍了突出显示表格行或列的备用颜色的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

The table alternative color as suggested in the dev guide doesn't work.

#salesarea tbody tr:nth-child(even) {
    background: rgb(245, 245, 245);
}

即使我使用sap.m.Table的ID，CSS也不起作用！

Even though I use the ID of the sap.m.Table, the CSS doesn't work!

编辑后添加代码:我使用的是xml/桌面版本，视图在外壳中.

Edited to add code:I'm using xml/desktop version and the view is in shell.

<Table
    id="qcTable"
    inset="false"
>
    <columns>
        <Column
            hAlign="Center"
            popinDisplay="Inline"
            width="10%"
        >
            <header>
                <Label text="Col 1"/>
            </header>
        </Column>
        <Column
            hAlign="Center"
            popinDisplay = "Inline"
        >
            <header>
                <Label text="Col2"/>
            </header>
        </Column>
    </columns>
</Table>

style.css

//using generated id during runtime

#viewCQ--qcTable-tblBody tbody tr:nth-child(even) {
    background: rgb(245, 245, 245) !important;
}

//using direct id of table

#viewCQ tbody tr:nth-child(even) {
    background: rgb(245, 245, 245) !important;
}

//using class of table

.viewCQ tbody tr:nth-child(even) {
    background: rgb(245, 245, 245) !important;
}

推荐答案

我们可以使用sap.m.ObjectStatus代替使用Css属性来提供颜色

Instead of using Css property for giving colors we can use sap.m.ObjectStatus

 var iDtemplate = new sap.m.ColumnListItem("idTemplate",{
             type: "Navigation",
              visible: true,
              selected: true,
                cells:[


                       new sap.m.ObjectStatus({
                           text:"{SlNo}",
                       }).bindProperty("state", "number", function(value) {
                              return getStatusColor(value);
                       }),


                      new sap.m.ObjectStatus({
                           text:"{Name}",
                       }).bindProperty("state", "number", function(value) {
                              return getStatusColor(value);
                       }),
                       ],
                     pressListMethod: function(event){
                            var bindingContext = event.getSource().getBindingContext();

                     }
            });

            function getStatusColor(status) {
                 if (status === '') {
                   return "Error";
                 }

                 else {
                     return "Success";
                 }
                }

根据数字字段，我们为Slno和Name列添加颜色.

Based on the number field we are giving colors to columns Slno and Name.

slno