Coloring a row in a table based on selection (SAC Table CSS)

[andreasja_schneider]

Hello and good morning:

I have the following challenge:
I want to (dynamically) color a row in an SAC table according to the cell a user clicked on.
I can color the selected cell with no problem, but how do I then color the completetable row?
There seems to be no CSS class for that.

I looked at nth-child(i), but how do I determine the i (== row number) and set it dynamically? Or is there a different way?

Thanks in advance,
Andreas J.A.

[Alex_B]

Hi @andreasja_schneider 
There is a way to achieve that.

1. Create for every potential row in your table a css entry (I did 200)
   .tablecolor1 .sap-custom-table-row:nth-child(1) {background-color: rgb(233,233,233);}
   .tablecolor2 .sap-custom-table-row:nth-child(2) {background-color: rgb(233,233,233);}
   .... 
2. Go to the Table.OnSelect script (in my case):
   

   Application.showBusyIndicator("Loading...");
   var sel= Table_1.getSelections();
   if (sel.length >0)
   {
   var memberId2=Table_1.getDataSource().getResultMember("YMAT_PLNT",sel[0]).id;
   }
   var arr = ArrayUtils.create(Type.MemberInfo);
   var mem = Table_1.getDataSource().getResultSet();
   for (var i = 0; i < mem.length; i++) {
   var member = mem[i]["YMAT_PLNT"];
   var memberId = member.id;
   var memberDescription = member.description;
   var alreadyExists = false;
   for (var j = 0; j < arr.length; j++) {
   if (arr[j].id === memberId) {
   alreadyExists = true;
   break;
   }
   }
   if (!alreadyExists) {
   arr.push({id: memberId, description: memberDescription});
   }
   }
   var position = -1;
   for (var k = 0; k < arr.length; k++) {
   if (arr[k].id === memberId2) {
   position = k;
   break;
   }
   }
   var color = "tablecolor"+(position+1).toString();
   console.log(color);
   Table_1.setCssClass(color);

   Application.hideBusyIndicator();