Før sommerferien begynte, jobbet jeg med layout, HTML og CSS til resultatsidene til NRKs valgdekning på nett. Siden valgresultatene stort sett består av talldata, egner det seg godt å bruke tabeller. Min kunnskap om tabeller var litt rusten, så arbeidet med resultatsidene var en ypperlig anledning til å friske opp både HTML og CSS. I tillegg til oppfriskingen, brukte jeg litt jQuery til å forbedre det visuelle og øke brukervennligheten.

Siden sommerværet ikke har vært supert de siste ukene, har jeg lekt litt mer med tabeller og jQuery. Resultatet av lekingen er altså min første jQuery plugin. Den legger til en rekke CSS-klasser for å utvide mulighetene for visuell utforming og brukervennlighet.

Slik aktiveres pluginen (jQuery biblioteket og pluginfilen må være lagt til):

jQuery(function($){
  $('table').tableTweaks();
});

Her er klassene som legges til:

.tt-alt

Klassen legges på annehver <tr> i <tbody>

.tt-first

Klassen legges på første <tr> og <th> eller <td>

.tt-last

Klassen legges på siste <tr> og <th> eller <td>

.tt-trace

Klassen legges på <th> i samme rad som musepekeren holdes over og på samsvarende <th> i <thead>

.tt-over-row

Klassen legges på <tr> som musepeker holdes over

.tt-over-col

Klassen legges på <td> med samme index som den musepeker holdes over i alle <tr> i <tbody>

.tt-over-cell

Klassen legges på <td> som musepeker holdes over

Hvis det er ønskelig å sette egne klassenavn, kan det gjøres slik:

jQuery(function($){
  $('table').tableTweaks({
    oddClass: 'dittklassenavn',
    firstClass: 'dittklassenavn',
    lastClass: 'dittklassenavn',
    highlightHeaders: 'dittklassenavn',
    overRow: 'dittklassenavn',
    overCol: 'dittklassenavn',
    overCell: 'dittklassenavn'
  });
});

Her finner du et eksempel og her er selve pluginfilen.