11545 sujets

JavaScript, DOM et API Web HTML5

Résolu Cacher/afficher colonne de tableau Résolu

Pages :
(reprise du message précédent)

Hello,
Siouperbe !j'étais moi aussi entrain d'essayer de trouver le prq du comment... et en regardant sur google je suis tombé sur un bout de code et voila t-y pas que nous qui partions à la chasse à l'octet ils me montrent pas comment gagner une ligne (tu as bien entendu 'une ligne')
c'est y pas génial...

var cells = document.getElementById('tbl').getElementsByTagName('TD');
(révolutionnaire comme idée non ?? )

Pour ce qui est de ton excuse 'dimanche'... je ne sais pas quel tps il fait chez toi mais à Paris c'est la cagnasse... donc l'excuse temperature trop élevée est tout aussi acceptable !

En tout cas merci pour le bout de code : je ne connaissais pas le getElementsByTagName et consor... j'en prends bonne note !

Maintenant que le bout de code on va pouvoir partir en we pas vrai ??? Smiley biggol

encore merci pr ton aide... je publierai ici le code finalisé bientot !

a+

H



CyrilCS a écrit :
2 erreurs pour un script aussi simple que ca, j'ai vraiment besoin de vacances, l'excuse : il est dimanche Smiley cligne 


function cacher(coll)
{
var elmt = document.getElementById('tbl');
var cells = elmt.getElementsByTagName('TD');
for (i=0; i [b]<[/b] cells.length; i++)
{
if (cells[ i ].className == coll)
{
cells[ i ].style.display = 'none';
}
}
}


avec le > dans le bon sens voila qui est mieux Smiley cligne

Cette fois j'ai pris le temps de tester avant de t'envoyer le code Smiley langue et comme j'avais un fichier d'ouvert je suis allé un peu plus loin 

 
<script language="javascript">

function cacher(coll)
{
	var elmt = document.getElementById('tbl');
	var elmtsCellule = 'th|td'.split('|');
	for(j=0; j < elmtsCellule.length; j++)
	{
		var cells = elmt.getElementsByTagName(elmtsCellule[ j]);
		for (i=0; i < cells.length; i++)
			if (cells[ i ].className == coll)
				if (cells[ i ].style.display != 'none')
					cells[ i ].style.display = 'none';
				else
					try
						{cells[ i ].style.display = 'table-cell';}
					catch (ex)
						{cells[ i ].style.display = 'block';}
	}
}
</script>

<table id="tbl" border="1">
<thead>
<tr>
<th class="col1">Colonne1</th>
<th class="col2">Colonne2</th>
<th class="col3">Colonne3</th>
</tr>
</thead>
<tbody>
<tr>
<td class="col1">Colonne1 - cell1</td>
<td class="col2">Colonne2 - cell1</td>
<td class="col3">Colonne3 - cell1</td>
</tr>
<tr>
<td class="col1">Colonne1 - cell2</td>
<td class="col2">Colonne2 - cell2</td>
<td class="col3">Colonne3 - cell2</td>
</tr>
</tbody>
</table>

<a href="#" onclick="cacher('col2')" title="cliquer pour cacher la colonne N°2">cacher la colonne 2</a>



j'espere que cette fois le code sera indenté sinon tu vas te tirer les cheveux pour comprendre :q

t'as peut etre besoin d'une explication pour ca 

					try
						{cells[ i ].style.display = 'table-cell';}
					catch (ex)
						{cells[ i ].style.display = 'block';}


en fait, j'essaye de mettre la cellule avec un display:table-cell c'est ce qu'il faudrais en théorie mais IE ne gere pas ce display, et la étonement il plante quand j'essaye de lui mettre ca, donc pas besoin de script de detection & co, si le truc plante, on lui met un display:block avec cette astuce ton script continuera a fonctionner meme avec IE7 Smiley smile 

					try
						{cells[ i ].style.display = 'table-cell';}
					catch (ex)
						{cells[ i ].style.display = 'block';}


en fait, j'essaye de mettre la cellule avec un display:table-cell c'est ce qu'il faudrais en théorie mais IE ne gere pas ce display, et la étonement il plante quand j'essaye de lui mettre ca, donc pas besoin de script de detection & co, si le truc plante, on lui met un display:block avec cette astuce ton script continuera a fonctionner meme avec IE7 Smiley smile

pour l'instant ca boom sans cette bidouille.. mais bon je vais le mettre car suis encore sur IE6 et en prévoyure...
il sort qd IE7 ??
(2° rq : pilpoil que ce soit compatible a droite et gauche...)
a+
Hello,
Ouf !!
sorti d'un truc bizzard sur firefox tt semble bien fonctionner !
grand merci à Cyril CS sans qui je n'aurais plus de cheveux à l'heure qu'il est !
H



<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 transitional//EN">
<HTML><HEAD><TITLE>Untitled Document</TITLE>
<META http-equiv=Content-Type content="text/html; charset=iso-8859-1">
<META content="MSHTML 6.00.2800.1458" name=GENERATOR></HEAD>
<BODY>
<SCRIPT language=javascript>


function cacher(coll)
	{
	document.getElementById("id"+coll).innerHTML="<a href='#' onclick=\"afficher(\'"+ coll +"\');\"><font color=red>Afficher "+ coll +"</font></a>";
		
	var elmt = document.getElementById('tbl');
	var elmtsCellule = 'th|td'.split('|');
	for(j=0; j < elmtsCellule.length; j++)
		{
		var cells = elmt.getElementsByTagName(elmtsCellule[ j]);
		for (i=0; i < cells.length; i++)
			if (cells[ i ].className == coll)
			if (cells[ i ].style.display != 'none')
				cells[ i ].style.display = 'none';
			else
			try		{cells[ i ].style.display = 'table-cell';}
		catch (ex)	{cells[ i ].style.display = 'block';}
	}
}


function cacher1(coll)
	{	document.getElementById("id"+coll).innerHTML="<a href='#' onclick=\"afficher(\'"+ coll +"\');\"><font color=red>Afficher "+ coll +"</font></a>";
		var cells = document.getElementById('tbl').getElementsByTagName('TD');
		for (i=0; i < cells.length; i++){	if (cells[ i ].className == coll)	{	cells[ i ].style.display = 'none';	}}
	}
	
function afficher(coll)
	{	document.getElementById("id"+coll).innerHTML="<a href='#' onclick=\"cacher(\'"+ coll +"\');\"><font color=green>Cacher "+ coll +"</font></a>";
		var cells = document.getElementById('tbl').getElementsByTagName('TD');
		for (i=0; i < cells.length; i++){if (cells[ i ].className == coll)	{cells[ i ].style.display = 'block';	}}
	}
	
	

	
</SCRIPT>

<TABLE id=tblr border=1>
  <tr>
    <TD id='idcol1'><A onclick="cacher('col1');" href="#"><font color=green>Cacher 1</font></A></TD>
    <TD id='idcol2'><A onclick="cacher('col2');" href="#"><font color=green>Cacher 2</font></A></TD>
    <TD id='idcol3'><A onclick="cacher('col3');" href="#"><font color=green>Cacher 3</font></A></TD>
</tr></TABLE>
<BR>
<TABLE id=tbl border=1>
	<tr>
		<TD class=col1><A title="cacher N°1" onclick="cacher('col1')" href="#">cacher 1</A></Td> 
    	<TD class=col2><A title="cacher N°2" onclick="cacher('col2')" href="#">cacher 2</A></Td> 
    	<TD class=col3><A title="cacher N°3" onclick="cacher('col3')" href="#">cacher 3</A></Td>
    </tr>
	<tr>
    	<TD class=col1>Colonne1 - cell1</TD>
    	<TD class=col2>Colonne2 - cell1</TD>
    	<TD class=col3>Colonne3 - cell1</TD>
    </tr>
  	<tr>
    	<TD class=col1>Colonne1 - cell2</TD>
    	<TD class=col2>Colonne2 - cell2</TD>
    	<TD class=col3>Colonne3 - cell2</TD>
  	</tr>
</TABLE>

</BODY></HTML>

Modifié par hdh (20 Jun 2005 - 17:57)
Hello,
j'avais des souscis sous FireFox (lors du réaffichage les lignes se superposaient au lieu de se mettre à la queue leuleu)... mais c'est chose réparée : je ne sais pas pourquoi(d'autres le sauront) mais le fait
d'avoir <td class='col1'> ne fonctionnait pas alors que
<td><div class='col1'>
fonctionne !!

Pour voir le tout en ligne (et me signaler des buggs... euh en effet il y en a ptê) on clipotte ici http://www.7rla.com/div/type.php

merci pour votre aide à tous !
Salut
j'ai essayé de mettre <div class='name'> comme tu di
ca marche impek sous firefox et safari mais ca ne fonctionne pas sous IE Smiley eek

plzz help
Pages :
Sujet clos
Aller à