css & JS => border table & td - Version imprimable

css & JS => border table & td - Version imprimable

+- JeuWeb - Crée ton jeu par navigateur (https://jeuweb.org)
+-- Forum : Discussions, Aide, Ressources... (https://jeuweb.org/forumdisplay.php?fid=38)
+--- Forum : Programmation, infrastructure (https://jeuweb.org/forumdisplay.php?fid=51)
+--- Sujet : css & JS => border table & td (/showthread.php?tid=4963)

css & JS => border table & td - Argorate - 01-07-2010

Bonsoir,

Jusqu'a maintenant j'utilisé juste la propriété border de la balise <table> pour afficher les cases de ma map, et j'ai un bouton permettant de les enlever ou les remettre en JS:

function cadrillage_map()

{

	if(document.getElementById('table_map').border == 0) document.getElementById('table_map').border = 1;

	else document.getElementById('table_map').border = 0;

}

Ca marchais très bien, mais voilà, je me suis dit que c'était moche le border gris par défaut, donc j'ai appliqué un style css de ce style:

#table_map, #table_map td {borderolid 1px #222222;}

Le css appliqué au table ne se propageant pas aux <td>, j’ai rajouté #table_map td.

Bref, pour en revenir au pb de la fonction JS qui ne fait plus le travail, j'ai tenté de la pour que ça remarche avec un vulgaire:

document.getElementById('table_map').style.border = 'none';

Mais voilà le problème, cela enlève bien les borders du tableau mais pas des cases...
Donc, ma question était n'y a t-il pas un moyen simple de remédié a cela?

J'espère qu'il y a une autre solution que parcourir tous les <td> du tableau...? -_-‘

Merci.

RE: css & JS => border table & td - orditeck - 01-07-2010

Personnellement, par simplicité, j'irais avec jQuery pour faire ça...



$('#idDeMonBouton').toggle(function() {

  $('.table_map').css("border","0");

  }, function() {

  $('.table_map').css("border","1");

});

http://api.jquery.com/toggle/
http://api.jquery.com/css/

avec un HTML du genre
<td class="table_map"></td>

RE: css & JS => border table & td - Argorate - 01-07-2010

Et sans jQuery? Smile

RE: css & JS => border table & td - Ter Rowan - 01-07-2010

sans jquery je dirais :

tu parcours tous les td de table_map (via le dom) et c'est à eux que tu appliques ta fonction

conclusion utilise un framework pour ça ^^

RE: css & JS => border table & td - Argorate - 01-07-2010

Bon, j'ai essayé avec le jquery, ça n'a pas marchais (ni mis d'erreur), mais bon vu que ça me semblait abérant d'utiliser un framework pour un truc aussi trivial j'ai fini par trouver le truc qui me manqué:

pour que ça se propage au <td> il suffit de rajouter dans mon style de base: "border-collapse:collapse;" et du coup ça remarche avec mon JS de 2 lignes d'origine ^^

vilou, merci.

RE: css & JS => border table & td - Ter Rowan - 01-07-2010

ah tiens je connaissais pas cette propriété ^^

RE: css & JS => border table & td - Argorate - 01-07-2010

si par "balise" tu entends la propriété css "border-collapse", moi non plus ^^

On se couchera moins bete Smile

RE: css & JS => border table & td - Ter Rowan - 01-07-2010

(01-07-2010, 11:01 PM)Argorate a écrit : si par "balise" tu entends la propriété css "border-collapse", moi non plus ^^

On se couchera moins bete

je vois pas de quoi tu parles Confused

iffle: mais d'accord avec la conclusion :p