Tabell beregning

Hva

CSS-selectorer har mye til felles med XPATH, både i form og funksjon.

I denne modulen skal vi lage et slags mini regneark. Vi bruker CSS-selectorer til å identifisere de elementene i en tabell vi skal lese og skrive i.

Tabellene i eksempelet er laget med en overskriftsrad, en rad nederst som skal holde kolonnesummer og en kolonne til høyre som skal holde radsummer.

Stilsettet for begge tabellene under er slik:

table.demo{border-collapse: collapse;}
table.demo  td{padding:10px}
table.demo thead  td{border-bottom-style:solid;font-weight:bold}
table.demo tfoot  td{border-top-style:solid}
table.demo tbody td+td{border-left-style:solid}

Summer

Table(tab1)

A	B	C	D
11	12	13	14	?
21	22	23	24	?
31	32	33	34	?
?	?	?	?

Den involverte Javascriptkoden er slik:

// Summing a column in a table
function sumCol(tabid,cix){
    var path='#'+tabid+' tr>td:nth-of-type('+cix+')';
    var cells=document.querySelectorAll(path);
    //var cells=document.querySelectorAll('#tab1 tr>td:nth-of-type(2)');
    var S=0;
    for(var ix=1;ix <cells.length-1;ix++)
        S+=parseInt(cells[ix].innerHTML);
    cells[cells.length-1].innerHTML=S;
}
// Summing a row in a table
function sumRow(tabid,rix){
    var path='#'+tabid+'> tbody tr:nth-of-type('+rix+')>td';
    var cells=document.querySelectorAll(path);
    //var cells=document.querySelectorAll('#tab1 tbody tr:nth-of-type(2)>td');
    var S=0;
    for(var ix=0;ix <cells.length-1;ix++)
        S+=parseInt(cells[ix].innerHTML);
    cells[cells.length-1].innerHTML=S;
}
// Summing all rows and columns in a table
function sumAll(tabid){
 var cols=document.querySelectorAll('#'+tabid+' > tbody tr:nth-of-type(1)>td');
 var rows=document.querySelectorAll('#'+tabid+' > tbody tr');
 
 // offset 1 since we start at 1 in query
 for(var rix=1;rix< cols.length; rix++)   
    sumCol(tabid,rix);
    
// offset 1 since we start at 1 in query
 for(var cix=1;cix< rows.length+1;cix++)        
    sumRow(tabid,cix);
}

Editer og summer

Her forsøker vi å lage en tabell der brukeren kan skrive verdier inn i feltene og få en øyeblikkelig oppdatering av alle summer. Vi gjør dette ved å sette attributten contenteditable i de cellene som skal være "skrivbare".

Det er mulig ved hjelp av CSS-selectorene å velge ut (og markere) deler av tabellen som er editerbare, f.eks bare en rad.

En funksjonell løsning burde ha bedre kontroll på at det er tall som skrives inn.

Table(tab2)

A	B	C	D
11	12	13	14	?
21	22	23	24	?
31	32	33	34	?
?	?	?	?

og skriv i tabellen

Javascript funksjonen som gjør tabellen editerbar er slik:

// make cells in a table contenteditable
function makeEditable(tabid){
  // includes the sum (rightmost) col (which it shouldnt)
  var path='#'+tabid+' tbody td';
  // so we use this:
  path='#'+tabid+' tbody tr td:not(:last-child)';
  
  var cells=document.querySelectorAll(path);
  for(var ix=0; ix < cells.length; ix++){ 
    cells[ix].contentEditable='true'; 
    cells[ix].onkeyup=function(){
        sumAll(tabid)};
    cells[ix].style.color="green";
 }
}

Referanser

CSS (Cascading Style Sheets) W3C www.w3.org/TR/CSS/ 08-03-2014