Javascript Masquer la colonne par défaut

Question

Après avoir consulté en ligne des tutoriels sur Javascript show/hide je n'ai pu trouver que des exemples où toutes les colonnes étaient visibles par défaut. Je cherche un moyen d'avoir des colonnes cachées par défaut (et permettez-leur d'être activées via une case à cocher) et d'avoir des colonnes affichées par défaut (et de les laisser être désactivées via une case à cocher).

Est-ce possible?

Pour référence ma structure de table est la suivante:

<table> 
    <thead> 
<tr> 
    <th>Name</th> 
    <th>Job</th> 
</tr> 
    </thead> 
    <tbody> 
    <tr> 
     <td>Mike</td> 
     <td>Dancer</td> 
    </tr> 
    </tbody> 
</table> 

Answer 1

pur javascript:

HTML

<input type="checkbox" onclick="showhide(1, this)" checked="checked" /> Name<br /> 
<input type="checkbox" onclick="showhide(3, this)" checked="checked" /> Job<br /> 

JS

function showhide(column, elem){ 
    if (elem.checked) 
     dp = "table-cell"; 
    else 
     dp = "none"; 
    tds = document.getElementsByTagName('tr'); 
    for (i=0; i<tds.length; i++) 
     tds[i].childNodes[column].style.display = dp; 
} 

Pure JS fiddle example

Veuillez considérer utiliser une bibliothèque javascript comme JQuery pour des choses aussi triviales. Vous code pourrait être aussi simple que:

HTML

<input type="checkbox" data-col="1" checked="checked" /> Name<br /> 
<input type="checkbox" data-col="2" checked="checked" /> Job<br /> 

jQuery JS:

$(function(){ 
    $(':checkbox').on('change', function(){ 
     $('th, td', 'tr').filter(':nth-child(' + $(this).data('col') + ')').toggle(); 
    }); 
}); 

jQuery Fiddle example

Answer 2

Les colonnes que vous souhaitez masquer devrait avoir l'attribut style = « display: none » initialement

Answer 3

dans votre css, vous devriez avoir quelque chose comme

.hidden{ 
    display:none; 
} 
.shown{ 
    display:block; 
} 

puis dans votre code html, vous devriez avoir quelque chose comme

<table> 
    <thead> 
    <tr> 
     <th id="th1" class="shown">Name</th> 
     <th id="th2" class="shown">Job</th> 
    </tr> 
    </thead> 
    <tbody> 
    <tr> 
     <td id="td1" class="shown">Mike</td> 
     <td id="td2" class="shown">Dancer</td> 
    </tr> 
    </tbody> 
</table> 

vous devez alors mettre en œuvre une méthode de togle qui va changer la visibilité de la colonne

//id should be passhed as 1, 2, 3 so on... 
function togleTable(id){ 
    if(document.getElementById("th"+id).className == "shown"){ 
     document.getElementById("th"+id).className = "hidden"; 
    } 
    if(document.getElementById("td"+id).className == "shown"){ 
     document.getElementById("td"+id).className = "hidden"; 
    } 
    if(document.getElementById("th"+id).className == "hidden"){ 
     document.getElementById("th"+id).className = "shown"; 
    } 
    if(document.getElementById("td"+id).className == "hidden"){ 
     document.getElementById("td"+id).className = "shown"; 
    } 
} 

puis en cas compobox onChange(), vous devez appeler la fonction togleTable passe comme identifiant le numéro de la ligne vous voulez montrer/cacher

c'est un bon endroit pour commencer je pense. Amusez-vous

MISE À JOUR

si vous voulez avoir plus d'une classe pour vos lignes n'oubliez pas, vous pouvez également utiliser:. document.getElementById (« id ») classList.add ('classe '); document.getElementById ('id'). ClassList.remove ('class');

Answer 4

est ici la fonction de bascule (en utilisant jQuery):

function toggleColumns(column, state) { 
    var cells = $("table").find("th, td").filter(":nth-child(" + column + ")"); 

    if (state) 
     cells.hide(); 
    else 
     cells.show(); 
} 

Si vous avez besoin de cette colonne masquée par défaut, vous pouvez appeler cette fonction pendant onLoad. Exemple http://jsfiddle.net/nynEd/

Answer 5

Il y a beaucoup de chemin pour cette mon option est d'utiliser les fonctions de jquery de base comme,

<input type="checkbox" id="opt1" checked/>col 1 
<input type="checkbox" id="opt2"/>col 2 

<table border="1" cellpadding="5"> 
    <thead> 
<tr> 
    <th>Name</th> 
    <th>Job</th> 
    <th id="col1">col 1</th> 
    <th id="col2">col 2</th> 
</tr> 
    </thead> 
    <tbody> 
    <tr> 
     <td>Mike</td> 
     <td>Dancer</td> 
     <td class="data1">data 1</td> 
     <td class="data2">data 2</td> 
    </tr> 
    </tbody> 
</table>​ 

Ceci est votre code HTML,

$(document).ready(function() { 
    if($("#opt1").is(":checked")){ 
     $("#col1").show(); 
     $(".data1").show(); 
    }else{ 
     $("#col1").hide(); 
     $(".data1").hide(); 
    } 
    if($("#opt2").is(":checked")){ 
     $("#col2").show(); 
     $(".data2").show(); 
    }else{ 
     $("#col2").hide(); 
     $(".data2").hide(); 
    } 

    $("#opt1").live('click', function() { 
     if($("#opt1").is(":checked")){ 
     $("#col1").show(); 
     $(".data1").show(); 
    }else{ 
     $("#col1").hide(); 
     $(".data1").hide(); 
    } 
    }); 

    $("#opt2").live('click', function() { 
     if($("#opt2").is(":checked")){ 
     $("#col2").show(); 
     $(".data2").show(); 
    }else{ 
     $("#col2").hide(); 
     $(".data2").hide(); 
    } 
    }); 
});​ 

Ceci est un code java-script .

S'il vous plaît trouver travailler example