Piilotetut taulukon solut

by Teppo Jussmäki

HTML

<table id="tahttp://jsfiddle.net/jssmk/axtn5apk/#runulu">
    <tr>
        <td class="kys1 2013">Kysymys 1 2013</td>
        <td class="kys1 2014">Kysymys 1 2014</td>
        <td class="kys2 2013">Kysymys 2 2013</td>
        <td class="kys2 2014">Kysymys 2 2014</td>
    </tr>
    <tr>
        <div class="testi">
        <td class="kys1 2013">A</td>
        <td class="kys1 2014">B</td>
        </div>
        <td class="kys2 2013">C</td>
        <td class="kys2 2014">D</td>
    </tr>
    <tr>
        <td class="kys1 2013">E</td>
        <td class="kys1 2014">F</td>
        <td class="kys2 2013">G</td>
        <td class="kys2 2014">H</td>
    </tr>
</table>

<select onChange="vaihdaVuosi(this.value)" id="vuosivaihto">
    <option value=".2014">2014</option>
    <option value=".2013">2013</option>
    <option value=".201">Kaikki</option>
</select>
<button type="button" onClick="tauluTulostus()">Lataa .csv-tiedostona</button>

<form>
    <input type="checkbox" name="kysval" value=".kys1" checked="yes" onClick="asetaKysymys(this.value, this.checked)">Kysymys 1<br/>
    <input type="checkbox" name="kysval" value=".kys2" checked="yes" onClick="asetaKysymys(this.value, this.checked)">Kysymys 2
</form>

        
<table id="jsontaulu"></table>
<form id="jsonvalinnat"></form>
<button type="button" onClick="obj_taulukko.teeTaulukko()">Piirrä taulukko uudestaan</button>

CSS

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

JavaScript

function vaihdaVuosi(v){
    var omaKeksi;
    if (v == ".2014" ) {
        $$('.2013').setStyle("display", "none");   
        $$('.2014').setStyle("display", "");
        omaKeksi = Cookie.write('vaplrapothlvuosi', '2014', {duration: 14});
    }else if (v == ".2013" ) {
        $$('.2014').setStyle("display", "none");
        $$('.2013').setStyle("display", "");
        omaKeksi = Cookie.write('vaplrapothlvuosi', '2013', {duration: 14});
    }else if (v == ".201" ) {
        $$('.2014').setStyle("display", "");
        $$('.2013').setStyle("display", "");
        // 201 matchaa sekä 2013 että 2014 kanssa, vähän tökerö kikka
        omaKeksi = Cookie.write('vaplrapothlvuosi', '201', {duration: 14});
    }
}

function asetaKysymys(v, b){
    var vuosi = Cookie.read('vaplrapothlvuosi');
    
    var vuosi_regex = '[^'.concat(vuosi).concat(']');
   // var vuosi_muu = '![^'.concat(vuosi).concat(']');
    var vuosi_muu = 'td:not([^'.concat(vuosi).concat('])');
    //window.alert(vuosi);
            
    //$$('th').setStyle("display", "none");
    //$$('td').setStyle("display", "none");
    // $$('.'.concat(vuosi)).setStyle("display", "");
    
    if (b == false) {
        $$(v).setStyle("display", "none");
    } else {
        $$(vuosi_muu).setStyle("display", "none");
        $$(v.concat(".").concat(vuosi_regex)).setStyle("display", "");

        window.alert(vuosi_muu);
    }
}

function tauluTulostus() {
    var taulu = document.id("taulu");
    
    var row = taulu.rows[0];
    var cell = row.cells[0];
    
    var tekstipotko = "";
    
    var vuosi = Cookie.read('vaplrapothlvuosi');
    
    if (vuosi != "2013" & vuosi != "2014" & vuosi != "201") {
        window.alert("Sisäinen virhe");
        window.alert(vuosi);
    }
    
    for (var i = 0; row = taulu.rows[i]; i++) {
       tekstipotko = tekstipotko.concat("\n");
       for (var j = 0; cell = row.cells[j]; j++) {
           if (cell.className.indexOf(vuosi) !=-1) {
               tekstipotko =...