Alternate Color for Highlighting Table Rows or Columns

问题

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

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

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

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

view.xml

<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;
}

回答1:

This approach does work. You need to ensure the CSS selectors are pointing to the right place. Here's an example (in a StackOverflow snippet):

new sap.m.Table("salesarea", {
  columns : [
    new sap.m.Column({
      header : new sap.m.Text({text: "Place"})
    })
  ],
  items: {
    path: "/places",
    template: new sap.m.ColumnListItem({
      cells : [
        new sap.m.Text({text: "{name}"})
      ]
    })
  }
})
.setModel(new sap.ui.model.json.JSONModel({
  places: [
    { name: "Manchester" },
    { name: "Liverpool" },
    { name: "Leeds" },
    { name: "Sheffield" }
  ]
}))
.placeAt("content");

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

<script src="https://openui5.hana.ondemand.com/resources/sap-ui-core.js" id="sap-ui-bootstrap" data-sap-ui-libs="sap.m" data-sap-ui-theme="sap_bluecrystal"></script>
<div id="content"></div>

回答2:

Have you used the Table inside a (declarative) View? Then the ID will be prefixed to guarantee uniqueness. Instead of relying on the ID you might want to use oTable.addStyleClass("mySalesTable"); to assign a CSS class to this table instance. Then you can be sure that exactly this class will be in the HTML and use it for the styling:

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

If this does not work, check in the developer tools of the browser 1. whether this rule is actually applied and 2. whether it is written by another rule.

回答3:

wow.. just found the mistake myself.. i'm supposed to use

viewCQ--qcTable-listUl

not

viewCQ--qcTable-tblBody. 

anyways thanks to all who responded quickly. tnx again.

回答4:

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";
                 }
                }

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

回答5:

Alternate colors are now supported by UI5 out of the box which can be applied via the property alternateRowColors (since 1.52) on sap.m.Table as well as on sap.ui.table.Table.

回答6:

==================xml===================================

<t:Table >
            <t:columns>
                 <t:Column width="11rem">
                    <Label text="标志" />
                    <t:template>
                        <Text text="{
                      path: 'status',
                      formatter: 'yaoji.utils.formatter.format'
                            }" 
                    />
                    </t:template>
                </t:Column>
            </t:columns>
        </t:Table>

===================format js===========================

yaoji.utils.formatter.format = function (cellValue) {
     this.onAfterRendering= function() {
     //!!! if not after redering, can't get the dom
        var cellId = this.getId(); 
        $("#"+cellId).parent().parent().parent().css("background-                         color","red"); 
     return cellValue;
};  

来源：https://stackoverflow.com/questions/27308502/alternate-color-for-highlighting-table-rows-or-columns