Dev Faq
7
votes

Comment désactiver et activer la table HTML à l'aide de JavaScript?

Je veux savoir comment puis-je désactiver et activer la surbrillance sur une table HTML à l'aide de JavaScript en cliquant sur un bouton HTML.

Voici mes codes: P>

TIRETTEST.HTML B> P> 

<html>
<head>
<script type="text/javascript">
 function disableTable() {
  document.getElementbyId('tblTest').disabled = true;
 }

 function enableTable() {
  document.getElementbyId('tblTest').disabled = false;
 }
</script>

<style type="text/css">
 table#tblTest {
  width: 100%;
  margin-top: 10px;
  font-family: verdana,arial,sans-serif;
  font-size:12px;
  color:#333333;
  border-width: 1px;
  border-color: #666666;
  border-collapse: collapse;
 }

 table#tblTest tr.highlight td {
  background-color: #8888ff;
 }

 table#tblTest tr.normal {
  background-color: #ffffff;
 }

 table#tblTest th {
  white-space: nowrap; 
  border-width: 1px;
  padding: 8px;
  border-style: solid;
  border-color: #666666;
  background-color: #dedede;
 }

 table#tblTest td {
  border-width: 1px;
  padding: 8px;
  border-style: solid;
  border-color: #666666;
  background-color: #ffffff;
 }
</style>
</head>

<body>
 <table id="tblTest">
  <thead>
   <tr>
    <th>Name</th>
    <th>Address</th>
   </tr>
</thead>
<tbody>
    <tr onMouseOver="this.className='highlight'" onMouseOut="this.className='normal'" >
        <td>Tom</td>    
        <td>UK </td>
    </tr>
    <tr onMouseOver="this.className='highlight'" onMouseOut="this.className='normal'" >
        <td>Hans</td>   
        <td>Germany</td>
    </tr>
    <tr onMouseOver="this.className='highlight'" onMouseOut="this.className='normal'" > 
        <td>Henrik</td> 
        <td>Denmark</td>
    </tr>
    <tr onMouseOver="this.className='highlight'" onMouseOut="this.className='normal'" >
        <td>Lionel</td> 
        <td>Italy</td>
    </tr>
    <tr onMouseOver="this.className='highlight'" onMouseOut="this.className='normal'" >
        <td>Ricardo</td>    
        <td>Brazil</td>
    </tr>
    <tr onMouseOver="this.className='highlight'" onMouseOut="this.className='normal'" >
        <td>Cristiano</td>  
        <td>Portugal</td>
    </tr>
</tbody>
</table>
 <input type="button" onclick="disableTable();" value="Disable" />
 <input type="button" onclick="enableTable()" value="Enable" />
 </body>
</html>

2 commentaires

désactivé signifie qu'un contrôle de formulaire ne sera pas soumis et ne peut pas être modifié. Les tables ne sont pas des contrôles de formulaire, alors ce que vous demandez n'a aucun sens.

Voici ce que je veux arriver. Lorsque je clique sur le bouton "Désactiver", je veux la surbrillance de la ligne et tous les effets sont supprimés.

10 Réponses :

2
votes

Vous ne pouvez pas désactiver une table. Que voulez-vous atteindre avec cela? Les tables sont en lecture seule de toute façon.

Si vous avez des balises d'entrée dans la table, vous pouvez désactiver ces un par un.

Voir aussi "Désactiver" une table HTML avec JavaScript

2 commentaires

Je veux qu'il regarde un bouton HTML désactivé.

Mais une table n'est pas un bouton. Vous pouvez modifier la classe de table et définir le style désactivé via CSS: , CSS: .Disableabled tr {couleur-couleur: gris; }

2
votes

Si vous voulez qu'il "regarde" désactivé ou activé, ajoutez des règles de classe à une feuille de style et ajoutez des classes à la table pour être activée ou désactivée. 

function disableTable() {
  addClassName(document.getElementbyId('tblTest'), 'disabled');
}
function enableTable() {
  removeClassName(document.getElementbyId('tblTest'), 'disabled');
}

function trim(s) {
  return s.replace(/(^\s+)|(\s+$)/g,'').replace(/\s+/g,' ');
}

function hasClassName (el, cName) {
  var re = new RegExp('(^|\\s+)' + cName + '(\\s+|$)');
  return el && re.test(el.className);
}

function addClassName(el, cName) {
  if (!hasClassName(el, cName)) {
      el.className = trim(el.className + ' ' + cName);
  }
}

function removeClassName(el, cName) {
  if (hasClassName(el, cName)) {
    var re = new RegExp('(^|\\s+)' + cName + '(\\s+|$)','g');
    el.className = trim(el.className.replace(re, ''));
  }
}

0 commentaires
1
votes

Une table ne peut pas être désactivée. Ce que vous voulez faire est de désactiver le bouton d'entrée et d'avoir une classe sur la table HTML qui donne une sorte d'illusion de décomposer / grimacer sur l'événement OnClick du bouton que vous choisissez.

3 commentaires

Pouvez-vous s'il vous plaît me donner un indice comment faire cela. Je suis vraiment nouveau à cette chose. Merci

Ajoutez une classe à votre table HTML. Dites (table.class) maintenant sur l'événement OnClick pour le bouton que vous avez choisi d'avoir "Désactiver" affiché dessus, assurez-vous que l'événement OnClick tire les nouveaux styles pour la table HTML. (Vous pouvez aller quelques itinéraires ici I.E JQUERY, CSS3 Opacité Propriétés)

Je pense que le code de code Robg a écrit est un moyen de compliquer une procédure simple. Il n'y a pas besoin de regex dans son problème.

1
votes

Vous ne pouvez pas désactiver une table. Une table affiche simplement des données - dans HTML, vous ne pouvez désactiver que des éléments de formulaire tels que des entrées, des sélectionneurs et des textaes, de sorte que vous ne pouvez plus interagir avec eux (c.-à-d. Tapez les données dedans, cliquez dessus ou sélectionnez une option).

Je pense que ce que vous essayez de faire, c'est avoir les événements Onmouseverover / -out Supprimer sur le bouton Cliquez? Vous êtes peut-être préférable d'utiliser jQuery - Jetez un coup d'œil à événements . La solution consiste à ajouter et à supprimer des événements sur le bouton Cliquez sur ce Fiddle .

0 commentaires
1
votes

Suivez cette recette:

Définissez deux ensembles de règles CSS. Un ensemble de règles commence toujours par table.Enabled , l'autre avec table.disabled

pour activer / désactiver toute la table, localiser l'élément DOM, localiser l'élément DOM. (Utilisation de document.getelementByID ('TblTest') Lorsque la table dispose du ID tbltest ) et attribue la classe respective: < Pré> xxx

0 commentaires
1
votes

Si vous voulez faire la table "Neckicable" à tout endroit - vous pouvez ajouter un DIV transperent ci-dessus avec la même taille.

0 commentaires
2
votes

Cela supprimera les événements Onmouseover de votre TR. 

  function disableTable() {
   var rows = document.getElementsByTagName("tr");
   for (var i = 0; i < rows.length; i++) {
     rows[i].onmouseover= null;
   } 
  }

0 commentaires
3
votes 
<html>
<head>
<script type="text/javascript">
disable = new Boolean();
 function highlight(a) {
  if(disable==false)a.className='highlight'
 }

 function normal(a) {
  a.className='normal'
 }
</script>

<style type="text/css">
 table#tblTest {
  width: 100%;
  margin-top: 10px;
  font-family: verdana,arial,sans-serif;
  font-size:12px;
  color:#333333;
  border-width: 1px;
  border-color: #666666;
  border-collapse: collapse;
 }

 table#tblTest tr.highlight td {
  background-color: #8888ff;
 }

 table#tblTest tr.normal {
  background-color: #ffffff;
 }

 table#tblTest th {
  white-space: nowrap; 
  border-width: 1px;
  padding: 8px;
  border-style: solid;
  border-color: #666666;
  background-color: #dedede;
 }

 table#tblTest td {
  border-width: 1px;
  padding: 8px;
  border-style: solid;
  border-color: #666666;
  background-color: #ffffff;
 }
</style>
</head>

<body>
 <table id="tblTest">
  <thead>
   <tr>
    <th>Name</th>
    <th>Address</th>
   </tr>
</thead>
<tbody>
    <tr onMouseOver="highlight(this)" onMouseOut="normal(this)" >
        <td>Tom</td>    
        <td>UK </td>
    </tr>
    <tr onMouseOver="highlight(this)" onMouseOut="normal(this)" >
        <td>Hans</td>   
        <td>Germany</td>
    </tr>
    <tr onMouseOver="highlight(this)" onMouseOut="normal(this)" > 
        <td>Henrik</td> 
        <td>Denmark</td>
    </tr>
    <tr onMouseOver="highlight(this)" onMouseOut="normal(this)" >
        <td>Lionel</td> 
        <td>Italy</td>
    </tr>
    <tr onMouseOver="highlight(this)" onMouseOut="normal(this)" >
        <td>Ricardo</td>    
        <td>Brazil</td>
    </tr>
    <tr onMouseOver="highlight(this)" onMouseOut="normal(this)" >
        <td>Cristiano</td>  
        <td>Portugal</td>
    </tr>
</tbody>
</table>
 <input type="button" onclick="disable = true;" value="Disable" />
 <input type="button" onclick="disable = false;" value="Enable" />
 </body>
</html>
Fixed your code. Use a function to check if it's disabled, if it isn't, then highlight. If it is, then don't. Simple enough.Demo
0 commentaires
-1
votes

Une table entière avec des champs d'entrée peut être bloquée en gardant la table dans la balise "champset" et désactivez-la via JavaScript

1 commentaires

Veuillez fournir la base de votre solution sur le code source OP

2
votes 
<html>
   <script>
      function disableTable(){
      document.getElementById("myTableFieldSet").disabled = true;
      }
      function enableTable(){
      document.getElementById("myTableFieldSet").disabled = false;
      }

   </script>
   <body>
      <form>
         <fieldset>
            <!-- place the table in a separate fieldset -->
            <fieldset id="myTableFieldSet">
               <table id="myTable">
                  <tr>
                     <td>Name</td>
                     <td>Email</td>
                  </tr>
                  <tr>
                     <td><input type="text"></td>
                     <td><input type="email"></td>
                  </tr>
               </table>
            </fieldset>
         </fieldset>
         <button type="button" onclick="disableTable()">Disable Table</button>
         <button type="button" onclick="enableTable()">Enable Table</button>
      </form>
   </body>
</html>
0 commentaires

Articles qui pourrait vous intéresser :

Impossible d'importer le module "@ angular / material"
Interaction profonde avec break and catch
Utilisation de node.js comment renommer tous les fichiers d'un dossier
Google Chrome Uncaught (promis) DOMException lors de la lecture AUDIO