[JS] tonen en verbergen van kolommen

[Dorgaldir]

Greetingz,

ik heb een probleempje met een stukje js dat ik aan het schrijven ben.
de bedoeling is dat afhankelijk van welke view er gekozen word bepaalde kolommen worden getoont.
bv de view NAW dan zien we de kolommen: naam, adres, postcode, gemeente, telefoon, gsm
de view voorschot laat dan weer de kolommen: naam, postcode, gemeente, voorschot, voorschotbedrag,.. zien

dmv php word de tabel helemaal gemaakt en dmv css worden een deel van de kolommen verborgen.

PHP:

<form name="ingeven" id="ingeven" action="" method="post" target="Onder">
<div id="zoek">View:
    <select name="welke" id="welke" onchange="wissel()" >
        <option value=""></option>
                <?
            foreach ($ar_filter as $value){
                if ($value == $welke2){
                print '<option selected value="'.$value.'">'.$value.'</option>';
                }
                else{
                print '<option value="'.$value.'">'.$value.'</option>';
                }
            }
        ?>
        </select>
</div>
</form>

<table border="0" class="sortable" id='sortabletable' width="100%"> 
<!-- Tonen van gegevens -->
<thead>
<tr>
<!-- Titelkoppen -->
    <th class="id">ID</th>
    <th class="Naam2" id="Naam">Naam</th>
    <th class="Adres" id="Adres">Adres</th>
    <th class="Postcode2" id="Postcode">Postcode</th>
    <th class="Gemeente2" id="Gemeente">Gemeente</th>
    <th class="Email" id="NaEmailam">Email</th>
    <th class="Telefoon" id="Telefoon">Telefoon</th>
    <th class="GSM" id="GSM">GSM</th>
    <th class="VoorschotFactuur" id="VoorschotFactuur">Voorschot?</th>
    <th class="VoorschotBedrag" id="VoorschotBedrag">Voorschot Bedrag</th>
</tr>
</thead>
<?
while ($rij){
?>
    <tr>
        <td class="id"><?print $rij["klantID"];?></td>
        <td class="Naam2" id="Naam"><?print $rij["Naam"];?></td>
        <td class="Adres"><?print $rij["Adres"];?></td>
        <td class="Postcode2"><?print $rij["Postcode"];?></td>
        <td class="Gemeente2"><?print $rij["Gemeente"];?></td>
        <td class="Email"><a href="mailto:<?print $rij['Email']?>"><?print $rij["Email"];?></a></td>
        <td class="Telefoon"><?print $rij["Telefoon"];?></td>
        <td class="GSM"><?print $rij["GSM"];?></td>
        <td class="VoorschotFactuur"><?print $rij["Voorschot_Factuur"];?></td>
        <td class="VoorschotBedrag"><?print $rij["Voorschot_Factuur_Bedrag"];?></td>
    </tr> 
    <?
    $rij = mysql_fetch_array($resultaat);
}
?>
</table>

JavaScript:

function wissel(){
    var wat = document.forms['ingeven'].elements['welke'].value;
    verdwijn();
    if (wat == ''){
    }
    else if (wat == 'NAW'){
        toon('Adres');
        toon('Email');
        toon('Telefoon');
        toon('GSM');
    }
}

function toon(naam){
    var naam2 = naam + '2';
    var alleLijnen = document.getElementsByTagName('td');
        for (var i = 0; i< alleLijnen.length; i++){
            if(alleLijnen[i].className == naam){
                alleLijnen[i].className = naam2;
            }
        }
        var class = document.getElementById(naam);
        if (class.className == naam){
            class.className = naam2;
        }
}

function verdwijn(){
    var mijnClasses=new Array();
    mijnClasses[0]="Adres";
    mijnClasses[1]="Email";
    mijnClasses[2]="GSM";
    mijnClasses[3]="Telefoon";
    mijnClasses[4]="VoorschotFactuur";
    mijnClasses[5]="VoorschotBedrag";
    var alleLijnen = document.getElementsByTagName('td');
    for (var i = 0; i< mijnClasses.length; i++){
        var naam2 = mijnClasses[i] + '2';
        if(alleLijnen[i].className == naam2){
            alleLijnen[i].className = mijnClasses[i];
        }
    }
    var class = document.getElementById(mijnClasses[i]);
    if (class.className == naam2){
        class.className = mijnClasses[i];
    }
}

Cascading Stylesheet:

td.Naam, th.Naam{
    display:none;
}

td.Adres, th.Adres{
    display:none;
}

td.Postcode, th.Postcode{
    display:none;
}

td.Gemeente, th.Gemeente{
    display:none;
}

td.Email, th.Email{
    display:none;
}

td.Telefoon, th.Telefoon{
    display:none;
}

td.GSM, th.GSM{
    display:none;
}

td.VoorschotFactuur, th.VoorschotFactuur{
    display:none;
}

td.VoorschotBedrag, th.VoorschotBedrag{
    display:none;
}

td.Naam2, th.Naam2{
    display:;
}

td.Adres2, th.Adres2{
    display:;
}

td.Postcode2, th.Postcode2{
    display:;
}

td.Gemeente2, th.Gemeente2{
    display:;
}

td.Email2, th.Email2{
    display:;
}

td.Telefoon2, th.Telefoon2{
    display:;
}

td.GSM2, th.GSM2{
    display:;
}

td.VoorschotFactuur2, th.VoorschotFactuur2{
    display:;
}

td.VoorschotBedrag2, th.VoorschotBedrag2{
    display:;
}

dit is wat ik al heb, ik geraak er niet wijs uit...

[ Voor 10% gewijzigd door Dorgaldir op 20-01-2010 14:29 ]

[Dorgaldir]

ow ja, het probleem, de tabellen worden wel getoont als ik een andere view kies, maar enkel als ik in de functie wissel() de regel verdwijn() in commentaar zet, anders doet hij niets...

[gvdh]

Probeer i.p.v. "display:;" eens "display: table-cell;". Een lege waarde is niet toegelaten denk ik.
Zou het trouwens niet gemakkelijker zijn hier jQuery voor te gebruiken?

[Dorgaldir]

jQuery zou ik inderdaad kunnen gebruiken maar ik wens zo weinig mogelijk buitenstaande code te gebruiken, ik ben daar persoonlijk niet zo'n fan van

[MueR]

Je krijgt vast een nuttige foutmelding ergens?

[Bosmonster]

Je zit wel een beetje ingewikkeld te doen. Enige dat je nodig hebt is een functie om de td's van die kolom op te halen (dit zou ik doen via classname, zoiets doe je nu al maar dan iets raars met die 2 erachter enzo).

Vervolgens kun je die td's toch gewoon op display: x / display: none zetten? Wat die x is zul je uit moeten zoeken xbrowser.

(overigens staat id="Naam" nog in je loop)

Met jQuery ben je in 2 regels xbrowser klaar, maar je hebt liever tientallen regels van jezelf las ik

[ Voor 17% gewijzigd door Bosmonster op 20-01-2010 15:17 ]

[Dorgaldir]

ik kreeg de melding "class is null" dus heb ik wat aangepast en het onderste deel van verdwijn() is nu

JavaScript:

var alleLijnen = document.getElementsByTagName('td');
    for (var j = 0; j< alleLijnen.length; j++){
        for (var i = 0; i< mijnClasses.length; i++){
            var naam2 = mijnClasses[i] + '2';
            if(alleLijnen[j].className == naam2){
                alleLijnen[j].className = mijnClasses[i];
            }
        }
    }
    for (var i = 0; i< mijnClasses.length; i++){
        var class = document.getElementById(mijnClasses[i]);
        if (class.className == naam2){
            class.className = mijnClasses[i];
        }
    }

en laat hij de waardes wel verdwijnen maar de koppen niet (document.getElementById(mijnClasses[i]))

[Dorgaldir]

Bosmonster schreef op woensdag 20 januari 2010 @ 15:14:
Met jQuery ben je in 2 regels xbrowser klaar, maar je hebt liever tientallen regels van jezelf las ik

jups, alles wat je zelf doet is beter
al merk ik dat het niet altijd simpeler is

[MueR]

Class is dan ook in vrijwel elke taal een reserved word, dus niet al te verstandig om die te gebruiken. Verder lijkt

JavaScript:

var class = document.getElementById(mijnClasses[i]);

mij de boosdoener.

[P.O. Box]

Kun je niet beter iets gebruiken waarmee je de CSS verandert, ipv iedere rij apart moet veranderen?

bijv. (slechts een voorbeeld):
http://www.quirksmode.org/dom/changess.html

[moozzuzz]

P.O. Box schreef op donderdag 21 januari 2010 @ 13:01:
Kun je niet beter iets gebruiken waarmee je de CSS verandert, ipv iedere rij apart moet veranderen?

bijv. (slechts een voorbeeld):
http://www.quirksmode.org/dom/changess.html

je voorbeeld zegt het zelf al: :^)

Unfortunately browser incompatibilities are so severe that this script isn't really usable in practice yet.