Afficher/Masquer une colonne d'un tableau
Bonjour,
J'ai récupéré le code ci-dessous qui fonctionne très bien, simplement je souhaiterais que certaines colones soient masquées dès l'ouverture de la page , j'ai essayé de faire des modifications, sans succes, pourriez vous m'éclairer.
Merci par avance.
Code:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69
|
<html>
<script type="text/javascript">
function inverse(ID, COL){
var table = document.getElementById(ID);
var nom = navigator.appName;
if (nom == 'Netscape'){
var detail=document.getElementsByName(COL);
} else {
var detail=getCellByName(table,COL);
}
if (detail[0].style.display == ""){
for(var i = 0; i < detail.length; ++i) detail[i].style.display = "none";
} else {
for(var i = 0; i < detail.length; ++i) detail[i].style.display = "";
}
}
function getCellByName(tab, nom){
var cols=new Array();
cellules=tab.getElementsByTagName("td");
for(var i = 0; i < cellules.length; ++i){
if(cellules[i].name==nom){
cols[cols.length]=cellules[i];
}
}
return cols;
}
</script>
<body>
Masquer/Afficher Col0 : <input type='checkbox' name='checkcol0' onClick="inverse('tb', 'col0');"CHECKED><BR>
Masquer/Afficher Col1 : <input type='checkbox' name='checkcol1' onClick="inverse('tb', 'col1');" CHECKED><BR>
Masquer/Afficher Col2 : <input type='checkbox' name='checkcol2' onClick="inverse('tb', 'col2');" CHECKED><BR>
Masquer/Afficher Col3 : <input type='checkbox' name='checkcol3' onClick="inverse('tb', 'col3');" CHECKED><BR>
<BR>
<table border="1" id="tb">
<tr>
<td name="col0">Nom</td>
<td name="col1">Prénom</td>
<td name="col2">Age</td>
<td name="col3">Ville</td>
</tr>
<tr>
<td name="col0">Dupont</td>
<td name="col1">Henri</td>
<td name="col2">25</td>
<td name="col3">Rennes</td>
</tr>
<tr>
<td name="col0">Durand</td>
<td name="col1">Paul</td>
<td name="col2">35</td>
<td name="col3">Lyon</td>
</tr>
<tr>
<td name="col0">Martin</td>
<td name="col1">Claude</td>
<td name="col2">40</td>
<td name="col3">Paris</td>
</tr>
</table>
</body>
</html> |