Afficher/masquer plusieurs colonnes d'un tableau
Résolu
Zico250814
Messages postés
9
Statut
Membre
-
Zico250814 Messages postés 9 Statut Membre -
Zico250814 Messages postés 9 Statut Membre -
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.
EDIT : AJout des balises de code (jordane)
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
-
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>
