Table, tr, td border tonen en verbergen

[Arcane Apex]

Ik ben bezig om een toggle te maken om de borders van een table aan en uit te kunnen zetten.
Ik heb van alles geprobeerd via CSS en Javascript, maar om de 1 of andere reden werkt het alleen voor de allerbuitenste rand van een table, dus niet voor de randen van tr's en td's en tevens werkt het toggelen van de buitenste rand alleen in IE.

Dit is de javascript code welke ik gebruik:

code:

function showHideTableBorder(){
    
    if(document.getElementById('myTable').style.borderWidth == '0px' || document.getElementById('myTable').style.borderWidth == false){
        document.getElementById('myTable').style.borderWidth = '1px'; 
        document.getElementById('myTable').style.borderStyle = 'solid';
        document.getElementById('myTable').style.borderColor = 'white';
        document.getElementById('myTableTr').style.borderWidth = '1px';
        document.getElementById('myTableTd').style.borderWidth = '1px';
    }
    else{
        document.getElementById('myTable').style.borderWidth = '0px';
        document.getElementById('myTableTr').style.borderWidth = '1px';
        document.getElementById('myTableTd').style.borderWidth = '0px';
    }
}

[ Voor 10% gewijzigd door Arcane Apex op 13-03-2008 10:45 ]

[Rekcor]

Psst... http://www.somacon.com/p141.php

( Google)

[Arcane Apex]

Rekcor schreef op donderdag 13 maart 2008 @ 10:46:
Psst... http://www.somacon.com/p141.php

( Google)

Ik heb veel van de CSS properties op die pagina ook al geprobeerd aan te roepen via Javascript om ze aan en uit te zetten. Bijvoorbeeld door de borderStyle op none te zetten of door display te gebruiken of visibility. Niets lijkt te werken.
Het enige dat een beetje werkt is de borderWidth op 1px of 0px te zetten en dan zo te switchen. Maar dat werkt dus alleen voor de buitenste rand van een table, niet voor de tr's en td's van een table. En tevens werkt het ook alleen in IE.

[ Voor 22% gewijzigd door Arcane Apex op 13-03-2008 10:55 ]

[BtM909]

Er zit een demo bij die zowel in FF als IE werkt

[Niemand_Anders]

Je kunt toch simpelweg de class van de tabel wijzigen

Cascading Stylesheet:

table.border { .. }
table.border tr { .. }
table.border tr td { .. }

table.noborder { .. }
table.noborder tr { .. }
table.noborder tr td { .. }

GetElementById is niet echt handig als je tabel meerdere rijen en kolommen bevat. Het enigste wat je hoeft te doen op deze manier is een opmaak maken voor een tabel met en zonder border. Vervolgens kun je middels GetElementByID welke de classname van de tabel zelf wijzigen.

[Arcane Apex]

Niemand_Anders schreef op donderdag 13 maart 2008 @ 11:12:
Je kunt toch simpelweg de class van de tabel wijzigen

Cascading Stylesheet:

table.border { .. }
table.border tr { .. }
table.border tr td { .. }

table.noborder { .. }
table.noborder tr { .. }
table.noborder tr td { .. }

GetElementById is niet echt handig als je tabel meerdere rijen en kolommen bevat. Het enigste wat je hoeft te doen op deze manier is een opmaak maken voor een tabel met en zonder border. Vervolgens kun je middels GetElementByID welke de classname van de tabel zelf wijzigen.

Dit was inderdaad de oplossing. Bedankt!

De werkende code:

code:

function toggleTableBorderWidth(){
        
        if(document.getElementById('myTable').className == 'class1' || document.getElementById('myTable').class == 'class1'){
            
            document.getElementById('myTable').setAttribute('class', 'class2'); //Firefox
            document.getElementById('myTable').setAttribute('className', 'class2'); //IE
        }
        else{
            document.getElementById('myTable').setAttribute('class', 'class1'); //Firefox
            document.getElementById('myTable').setAttribute('className', 'class1'); //IE
        }   
}

[ Voor 11% gewijzigd door Arcane Apex op 13-03-2008 22:58 ]

[Arcane Apex]

Bij nader inzien werkt de bovenstaande code wel voor IE, maar niet voor Firefox, dat terwijl ik wel rekening heb gehouden met het verschil tussen de elementen className wat IE gebruikt en class wat door Firefox wordt gebruikt.
Iemand enig idee hoe dit kan komen?

[TeeDee]

Kan hier even niet testen maar kan je niet gewoon:

JavaScript:

function toggleTableBorderWidth() {
    if(document.getElementById('myTable').className == 'class1' || document.getElementById('myTable').class == 'class1')
    {
        document.getElementById('myTable').class='class2';
    }
    else 
    {
        document.getElementById('myTable').class='class1';
    }
}

Evt. kan je dit nog verkorten met wat ternary logica.

[Arcane Apex]

TeeDee schreef op donderdag 13 maart 2008 @ 13:51:
Kan hier even niet testen maar kan je niet gewoon:

JavaScript:

function toggleTableBorderWidth() {
    if(document.getElementById('myTable').className == 'class1' || document.getElementById('myTable').class == 'class1')
    {
        document.getElementById('myTable').class='class2';
    }
    else 
    {
        document.getElementById('myTable').class='class1';
    }
}

Evt. kan je dit nog verkorten met wat ternary logica.

Ik heb het uitgeprobeerd maar dat lijkt zowel voor IE als Firefox niet te werken. IE accepteert namelijk alleen className ipv class. Echter het vreemde is dat zowel class als className niet lijken te werken in Firefox.

[Bosmonster]

Zet gewoon de className property van het element. Doe dat niet via setAttribute, want het is geen attribute, maar een property.

code:

document.getElementById('blaat').className = 'newclass';

Werkt pima in alle enigszins moderne browsers.

[ Voor 13% gewijzigd door Bosmonster op 13-03-2008 14:42 ]

[TeeDee]

Arcane Apex schreef op donderdag 13 maart 2008 @ 14:06:
[...]


Ik heb het uitgeprobeerd maar dat lijkt zowel voor IE als Firefox niet te werken. IE accepteert namelijk alleen className ipv class. Echter het vreemde is dat zowel class als className niet lijken te werken in Firefox.

Ik doelde, zoals Bosmonster en jij al in je if(...) aanhaalde, natuurlijk className. Maar goed: wat let je om even het e.e.a. op te zoeken.

[Arcane Apex]

Bosmonster schreef op donderdag 13 maart 2008 @ 14:41:
Zet gewoon de className property van het element. Doe dat niet via setAttribute, want het is geen attribute, maar een property.

code:

document.getElementById('blaat').className = 'newclass';

Werkt pima in alle enigszins moderne browsers.

Bij mij lijkt het niet in Firefox te werken.

[Bosmonster]

Arcane Apex schreef op donderdag 13 maart 2008 @ 18:21:
[...]


Bij mij lijkt het niet in Firefox te werken.

dan is je firefox brak, wan het hoort gewoon te werken

[Duroth]

NoScript geïnstalleerd en dat vergeten?
Het hoort (zoals bij mij) gewoon te werken namelijk.

[TeeDee]

offtopic:
maar je mag ook wel zelf even wat moeite doen hoor...

[lordsnow]

Arcane Apex schreef op donderdag 13 maart 2008 @ 13:46:
Bij nader inzien werkt de bovenstaande code wel voor IE, maar niet voor Firefox, dat terwijl ik wel rekening heb gehouden met het verschil tussen de elementen className wat IE gebruikt en class wat door Firefox wordt gebruikt.
Iemand enig idee hoe dit kan komen?

In je Else:
document.getElementById('myTable').setAttribute('class', 'class2'); //Firefox
document.getElementById('myTable').setAttribute('className', 'class1'); //IE

... moet dat geen 1 zijn?

//disclaimer: ik heb hier geen f*k verstand van, maar ik vergeleek 't even met de eerste helft, en dit leek mij logisch.

[ Voor 9% gewijzigd door lordsnow op 13-03-2008 19:20 ]

[Arcane Apex]

lordsnow schreef op donderdag 13 maart 2008 @ 19:17:
[...]


In je Else:
document.getElementById('myTable').setAttribute('class', 'class2'); //Firefox
document.getElementById('myTable').setAttribute('className', 'class1'); //IE

... moet dat geen 1 zijn?

//disclaimer: ik heb hier geen f*k verstand van, maar ik vergeleek 't even met de eerste helft, en dit leek mij logisch.

Dat klopt. Dat heb ik wel goed in mijn eigen code. Ik pas het aan.

[Arcane Apex]

Duroth schreef op donderdag 13 maart 2008 @ 18:50:
NoScript geïnstalleerd en dat vergeten?
Het hoort (zoals bij mij) gewoon te werken namelijk.

Heb geen NoScript geinstalleerd staan. De Firefox versie welke ik gebruik is FF3 beta 4.