Yksikkötulokset

HTML

<p>Testi - kaikki data on epävarmaa</p>
<table id="jsontaulu">
</table>

<div id="lataus" style="left: 40%; top: 40%;  right: 40%; z-index: 100; position: fixed; background-color: #FFFFFF; border-style: solid; border-width: 2px; border-color: rgb(81, 155, 47); text-align: center; padding: 1em;">Ladataan...</div>

<!-- valikko alkaa -->

<div id="valikko_wrap" style="left: 10%; top: 0em; z-index: 50; position: fixed; right: 10%;">
	<div id="valikko_nappi" style="background-color: #519B2F; text-align:center; height: 20px;">
		<a id="h_toggle" href="#h_toggle" style="font: 100%/1.4em 'Source Sans Pro',Arial,sans-serif; color: white; font-weight: bold; font-size: 1em;">Valikko [avaa/sulje]</a>
	</div>
<div id="valikko" style="max-height: 70%; background-color: #FFFFFF; border-style: none solid solid; border-width: 2px; border-color: rgb(81, 155, 47); visibility: visible; height: 100%; position: fixed; overflow: auto; left: 10%; right: 10%; padding: 1em;">

<button type="button" onClick="obj_sivu.alustaTaulukko();">Piirrä taulukko uudestaan</button>
<button type="button" onClick="obj_sivu.teeCSV()">Lataa näkyvä taulukko CSV-tiedostona</button>


<p>Kieli</p>

<input id='fi_kieli' type="radio" name="kieli" value="fi" checked>suomi
<input id='se_kieli' type="radio" name="kieli" value="se">svenska

<p>Seurantavuodet</p>
<div id="vuosivaldiv"><form id="piilotusvuosi" method="POST"></form>
    <input type="checkbox" id="vuosi2013" value="Vuosi 2013" onClick="obj_sivu.vuosiEsitys()">Vuosi 2013</input>
    <input type="checkbox" id="vuosi2014" value="Vuosi 2014" checked="yes"  onClick="obj_sivu.vuosiEsitys()">Vuosi 2014</input>
</div>


<p>Kysymykset</p>
<div id="kysvaldiv">
<a href="#" class="val_a" onClick="obj_sivu.valKaikki(jsonvalintakys, 'yes')">Valitse kaikki</a>  |  
<a href="#" class="val_a" onClick="obj_sivu.valKaikki(jsonvalintakys, '')">Poista valinnat</a>

<form id="jsonvalintakys" method="POST"></form>
</div>

    
<p>Sektori</p>
<div id="sekvaldiv"><form...

CSS

table, td, th {
   border: 1px solid black;
}
td,th {
    padding: 3px;
}
tr:nth-child(even) {background-color: #ECF7E4}
tr:nth-child(odd) {background-color: #FFF}

td div.metainfo {
   background-color: #FFFFCC;
   z-index : 10;
   border : 1px solid black;
   padding: 5px;
   visibility: hidden;
   display : block;
   position: absolute;
}
td:hover div.metainfo
{
   visibility: visible;
   min-height : 70px;
   width: 150px;
} 


th div.metainfo {
   background-color: #FFFFCC;
   z-index : 10;
   border : 1px solid black;
   padding: 5px;
   visibility: hidden;
   display : block;
   position: absolute;
}
th:hover div.metainfo
{
   visibility: visible;
   min-height : 70px;
   width: 150px;
} 


#kysvaldiv
{
    background-color : #CCFFFF;
    margin: 1em 0em 1em 0em;
}
#yksikkovaldiv
{
    background-color : #FFCCFF;
    margin: 1em 0em 1em 0em;
}
#sijaintivaldiv
{
    background-color : #CCFFCC;
    margin: 1em 0em 1em 0em;
}
#sekvaldiv
{
    background-color : #FFFFCC;
    margin: 1em 0em 1em 0em;
}
#sijvaldiv
{
    background-color : #FFCCCC;
    margin: 1em 0em 1em 0em;
}
#txtnrodiv
{
    background-color : #CCCCFF;
    margin: 1em 0em 1em 0em;
}
a, a:visited
{
    color: blue;
    text-decoration: none;
}

div.v2014 {
    border-top-width: 1px;
    border-top-style: dotted;
}
div.v2013::before { content: "2013 : "; }
div.v2014::before { content: "2014 : "; }

p.suod_txt { font-size : 10pt; margin-bottom: 0em; }

/*label {
    display: block;
    float:left;
}*/

JavaScript

var taulukkoLuokka = new Class({
    ots_txt:  null,      // tekstimuotoinen otsikko
    ots_html: null,      // html-muotoinen otsikko
    ots_alkper: null,    // alkuperäinen kysymys
    sarakkeet2013_html: null,
    sarakkeet2014_html: null,
    sarakkeet2013_txt: null,
    sarakkeet2014_txt: null,
    metarivit: null,      //Järjestäjän nimi
    metaextra: null,      //Jäsenkuntien nimet
    
    teeTaulukko: function(yksikot, vastaukset, tuottajat, sijainnit, kysymykset, labelit) {
        sarakkeet2013_html = [];
        sarakkeet2014_html = [];
        sarakkeet2013_txt = [];
        sarakkeet2014_txt = [];
        metarivit = [];
        metaextrat = [];
        ots_alkper = [];
        
        /* otsikkorivi */
         ots_html  = [
             "Yksikkö   <a href='#' onClick='obj_sivu.jarjestaData(\"yksikkonimi\", \"az\")'>↑</a>  <a href='#' onClick='obj_sivu.jarjestaData(\"yksikkonimi\", \"za\")'>↓</a>",
             "Tuottaja   <a href='#' onClick='obj_sivu.jarjestaData(\"tuottaja\", \"az\")'>↑</a>  <a href='#' onClick='obj_sivu.jarjestaData(\"tuottaja\", \"za\")'>↓</a>",
             "Sijainti   <a href='#' onClick='obj_sivu.jarjestaData(\"sijainti\", \"az\")'>↑</a>  <a href='#' onClick='obj_sivu.jarjestaData(\"sijainti\", \"za\")'>↓</a>",
             "Sektori   <a href='#' onClick='obj_sivu.jarjestaData(\"sektori\", \"az\")'>↑</a>  <a href='#' onClick='obj_sivu.jarjestaData(\"sektori\", \"za\")'>↓</a>"];
        ots_txt = ["Yksikkö", "Lisätieto", "Sijainti", "Tuottaja", "Sektori", "Vuosi"];
        var xalkper = "?";
        
        Object.each(kysymykset, function(kys_obj, kys_key){
            /* Kysymykset, otsikot */
            xalkper = "?";
            if (kys_obj.i !== undefined) {xalkper = kys_obj.i;}
            ots_html[ots_html.length] = kys_obj.o;
            ots_alkper[ots_alkper.length] = xalkper;
            ots_txt[ots_txt.length]   = kys_obj.o;
            
            // uusi rivi alkaa, tyhjätään vanha
            var...