Sujet Précédent Sujet Suivant

Afficher/masquer plusieurs colonnes d'un tableau

Résolu/Fermé
Zico250814 Messages postés 9 Date d'inscription jeudi 7 décembre 2017 Statut Membre Dernière intervention 25 avril 2018 - Modifié le 17 avril 2018 à 17:54
Zico250814 Messages postés 9 Date d'inscription jeudi 7 décembre 2017 Statut Membre Dernière intervention 25 avril 2018 - 18 avril 2018 à 09:57
Bonjour,

Merci d'avance pour votre aide.

ci-dessous, mon petit script.
Mon problème, c'est que pour masquer plusieurs colonnes le script fonctionne très-bien, mais quand on affiche après avoir masquer, les colonnes se converti en lignes. Je veux avoir le même tableau!!


Est-ce que vous avez une solution SVP. Merci encore. 
<html> 

<head> 
<script type="text/javascript"> 
function HideCol() { 
var table = document.getElementById ("Tab"); 

var x = table.rows[0].cells[1].style; 
var x2 = table.rows[1].cells[1].style; 
var x3 = table.rows[0].cells[2].style; 
var x4 = table.rows[1].cells[2].style; 
x.display = 'none'; 
x2.display = 'none'; 
x3.display = 'none'; 
x4.display = 'none'; 

} 
function ShowCol() { 
var table = document.getElementById ("Tab"); 

var x = table.rows[0].cells[1].style; 
var x2 = table.rows[1].cells[1].style; 
var x3 = table.rows[0].cells[2].style; 
var x4 = table.rows[1].cells[2].style; 
x.display = 'block'; 
x2.display = 'block'; 
x3.display = 'block'; 
x4.display = 'block'; 

} 
</script> 
</head> 
<body> 
<table border="3px" id="Tab"> 
<tr> 
<td>France</td> 
<td>Paris</td> 
<td>Lyon</td> 
<td>Marseille</td> 
</tr> 
<tr> 
<td>Italie</td> 
<td>Rome</td> 
<td>Napoli</td> 
<td>Milan</td> 
</tr> 
</table> 

<button onclick="HideCol(); ">-</button> 
<button onclick="ShowCol(); ">+</button> 
</body> 

</html>


EDIT : AJout des balises de code (jordane)

1 réponse

Réponse 1 / 1
jordane45 Messages postés 37532 Date d'inscription mercredi 22 octobre 2003 Statut Modérateur Dernière intervention 5 juin 2023 4 585
17 avril 2018 à 18:08
Bonsoir, 

<!DOCTYPE html>
<html> 
	<head> 
		<meta charset="UTF-8">
		<title> TEST </title>
	</head> 
	<body> 
		<table border="3px" id="Tab"> 
			<tr> 
				<td>France</td> 
				<td>Paris</td> 
				<td>Lyon</td> 
				<td>Marseille</td> 
			</tr> 
			<tr> 
				<td>Italie</td> 
				<td>Rome</td> 
				<td>Napoli</td> 
				<td>Milan</td> 
			</tr> 
		</table> 

		<button onclick="HideCol(); ">-</button> 
		<button onclick="ShowCol(); ">+</button> 
			
		<!-- On place les scripts JS de préférence à la fin au lieu du head -->
		<script type="text/javascript"> 
		var table = document.getElementById ("Tab"); 
		var x = table.rows[0].cells[1].style; 
		var x2 = table.rows[1].cells[1].style; 
		var x3 = table.rows[0].cells[2].style; 
		var x4 = table.rows[1].cells[2].style;
		function HideCol() { 
			show_hide_column(1,false);
			show_hide_column(2,false);
		} 
		
				
		function ShowCol() {  
			show_hide_column(1,true);
			show_hide_column(2,true);
		} 
		
		function show_hide_column(col_no, do_show) {
			var rows = document.getElementById('Tab').rows;
			
			for (var row = 0; row < rows.length; row++) {
				var cols = rows[row].cells;
				if (col_no >= 0 && col_no < cols.length) {
					cols[col_no].style.display = do_show ? '' : 'none';
				}
			}
		}
		</script> 
	</body> 
</html>

0
jordane45 Messages postés 37532 Date d'inscription mercredi 22 octobre 2003 Statut Modérateur Dernière intervention 5 juin 2023 4 585
Modifié le 17 avril 2018 à 18:10
Sinon... ton code marche aussi.
Faut juste remplacer 'block' par '' 
x.display = ''; 
x2.display = ''; 
x3.display = ''; 
x4.display = '';
0
Zico250814 Messages postés 9 Date d'inscription jeudi 7 décembre 2017 Statut Membre Dernière intervention 25 avril 2018
18 avril 2018 à 09:57
Bonjour Jordan
Merci pour tous. ça marche. Nikel!!
0