“Désactivation” un tableau HTML avec Javascript

J'ai vu cette façon de faire dans un grand nombre de sites récemment, mais ne peut pas sembler une piste vers le bas. En fait, j'ai envie de "désactiver" tout un groupe (qui est en forme sur un tableau HTML) quand on clique sur un bouton.

Par désactiver je veux dire je ne veux pas la forme des éléments à l'intérieur de la table pour être utilisable, et je veux la table de sorte de fade out.

J'ai été en mesure d'atteindre cet objectif en mettant un "voile" sur la table avec un positionnement absolu div qui a un fond blanc avec une faible opacité (de sorte que vous pouvez voir la table derrière elle, mais impossible de cliquer sur quoi que ce soit car le div est en face d'elle). Cela ajoute aussi l'effet délavé que je veux. Cependant, lorsque j'ai posé la hauteur de la voile à 100% qu'il va seulement à la taille de mon écran (pas y compris le défilement), de sorte que si un utilisateur fait défiler vers le haut ou vers le bas, ils voient le bord de la voile et c'est pas joli.

Je suis en supposant que ce qui est généralement fait dans un autre mode. Quelqu'un aurait-il des suggestions comme une meilleure façon d'accomplir cette?

OriginalL'auteur Blair Jones | 2010-04-30

  1. 0

    Tu ne peux pas trouver la hauteur de la zone de pixels avec JavaScript? Et puis définissez le voile est à la hauteur de ce nombre?

    Je n'ai pas le code exact dans ma tête, mais offsetHeight pourrait faire l'affaire

    J'ai fini par trouver la hauteur du document et en l'utilisant pour étirer le voile sur l'ensemble de la page au lieu de l'utiliser à 100%: document.documentElement.clientHeight;

    OriginalL'auteur Karl Johan

  2. 6

    Vous pouvez essayer de javascript comme:

    function disable(table_id)
{
    var inputs=document.getElementById(table_id).getElementsByTagName('input');
    for(var i=0; i<inputs.length; ++i)
        inputs[i].disabled=true;
}
    J'ai eu des problèmes similaires.Cette solution a fonctionné pour moi.Merci
    Vous êtes vraiment perdus button, select et textareas. Ceux qui peuvent avoir besoin d'être désactivé.

    OriginalL'auteur Soumya

  3. 3

    Essayer de le ci-dessous avec Jquery

    $("#freez").click(function(){
    $('#tbl1').find('input, textarea, button, select').attr('disabled','disabled');
});
$("#unfreez").click(function(){
    $('#tbl1').find('input, textarea, button, select').removeAttr("disabled");
});
    Au lieu de cette longue liste, vous pouvez utiliser :input. Il y aura une certaine perte de performance, mais pas tant que ça. Éventuellement...

    OriginalL'auteur Satya

  4. 0

    Quelqu'un s'il vous plaît corrigez-moi si je me trompe, mais j'ai vu Javascript et certains dérivés de bibliothèques Javascript que vous avez beaucoup d'options pour accomplir ce que vous souhaitez faire. J'ai utilisé la bibliothèque jQuery pour faire quelques effets similaires.

    Une chose à penser est exactement ce que vous essayez de le désactiver. Essentiellement, les tables ne sont pas interactifs de sorte que la désactivation d'un tableau ne serait pas accomplir beaucoup. Si c'est la forme des éléments à l'intérieur de la table que vous souhaitez désactiver. Vous pouvez accomplir cela en utilisant JavaScript.

    Avec l'aide de JavaScript pour désactiver les éléments de formulaire, vous pouvez également l'utiliser pour modifier les propriétés de la non-interactif éléments.

    Un exemple de ceci serait l'utilisation de JavaScript pour changer la couleur de la police et des frontières et d'autres non des éléments interactifs dans le tableau de donner le "look" d'être désactivé. Bien sûr, vous devez toujours utiliser JavaScript pour désactiver les éléments de formulaire.

    OriginalL'auteur TheJediCowboy

  5. 0

    La désactivation de l'intérieur des éléments d'un tableau HTML peut aussi être fait en utilisant pointeur-événements de style CSS comme indiqué ci-dessous:

    table[disabled], table[disabled] input { pointer-events: none }

    À n'importe quel point dans notre code JavaScript logique, nous pouvons ajouter disabled attribut de la table parent comme indiqué ci-dessous qui apportera le style CSS en vigueur:

    let gameTable = document.getElementById('gameBoard');
gameTable.setAttribute('disabled', true);

    OriginalL'auteur RBT