How do I create classes for the published TH and TD elements?

Last Edited 29st April 2020 by Jon

This post only applies to Sailwave versions 2.6.2 and later.

Sailwave results contain four tables: summary, race, code and prize.  By default, Sailwave does not add “class=classname” attributes to the th and td elements of these tables.  It does use colgroup and col but CSS is limited in that you can only perform these changes to columns as a whole using CSS:-

  • Set the background color
  • Set the width
  • Set a border
  • Control visibility

You can add classes to td and th elements yourself by creating your own result template and specifying class names using the Sailwave class.set callback function.  For example:-

`class.set("prize.col.competitor.td", "prize-comp")`

All the td elements in the competitor column of the prize table will then have the prize-comp class applied.  For example, an actual td element may look like this:-

<td class="prize-comp">Colin Jenkins</td>

These class.set calls must be placed before the call to html.resultswiz.

The first parameter to class.set identifies the table and its column with a suffix of .td representing the table cells and .th representing the header cells.  The second parameter is your class name or names separated by spaces – the definition(s) of which you need to add to any of your modified or custom styles.  For example:-

.prize-comp {font-weight: bold;}

The set of valid columns for the first parameter can be found by looking in the factory version of Results.htm and identifying the string.set calls containing:-

*.col.*

As of 22/11/2012 these are (note this help may lag the content of Results.htm) :-

prize.col.rank
prize.col.category
prize.col.competitor
codes.col.description
codes.col.code
codes.col.points
race.col.start
race.col.finish
race.col.elapsed
race.col.laps
race.col.corrected
race.col.bce
race.col.bcr
race.col.speed
race.col.place
race.col.points

You can target columns in the summary and race tables representing competitor field names using:-

summary.col.fieldname
race.col.fieldname

You can target the race columns of the summary table with:-

summary.col.race

Examples:-

`class.set("race.col.points.th","myclass1")`
`class.set("summary.col.sailno.td","myclass2 myclass3")`
`class.set("summary.col.race.th","myclass4")`

By convention, the first parameter to class.set is specified in lower case but it is not essential.  The second parameter must not contain a speech quote ” or backquote ` character.

 

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.