Hoe html-look uitgeschakeld te maken?

Ik heb in sommige forums gelezen dat een html-tabel er uitziet als uitgeschakeld om een ​​laag div toe te voegen. Mijn probleem is dat ik niet weet hoe ik het moet doen.

Ik heb 3 vragen:

1.) Hoe stel ik de div-hoogte in die automatisch wordt aangepast aan de hoogte van de tafel wanneer de tafel hoger wordt wanneer een nieuwe rij wordt toegevoegd.

2.) Hoe zal ik de div de tafel dekken. Ik weet niet hoe ik html-elementen moet linken.

3.) Hoe ga ik het JavaScript coderen waardoor mijn tabel eruit zal zien als ik op de knop 'Uitschakelen' klik en weer inschakel wanneer ik op de knop 'Inschakelen' klik.

tabledisabletest.html

<html>
<head>
<script type="text/javascript">

</script>
</head>

<body>

 <div id="disabler"></div>

 <table id="tblTest">
  <thead>
   <tr>
    <th>Name</th>
    <th>Address</th>
   </tr>
  </thead>
  <tbody>
   <tr>
    <td>Tom</td>    
    <td>UK </td>
   </tr>
   <tr>
    <td>Henrik</td> 
    <td>Denmark</td>
   </tr>
   <tr>
    <td>Lionel</td> 
    <td>Italy</td>
   </tr>
   <tr>
    <td>Ricardo</td>    
    <td>Brazil</td>
   </tr>
   <tr>
    <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>

Ik heb de div disabler om het uitschakelen uit te voeren, maar ik kan er niet voor zorgen dat het de tabel bedekt.

Help me alsjeblieft hiermee. Ik ben zo nieuw voor dit ding. Bij voorbaat dank.

5
Wat bedoel je precies met het uiterlijk uitschakelen ? Kan de gebruiker er nog steeds tekst uit selecteren? Moet het die randen en schaduweffecten hebben die u ziet op uitgeschakelde besturingselementen?
toegevoegd de auteur Salman A, de bron
Suggestie: gebruik jQuery BlockUI. Demo's: jquery.malsup.com/block/#demos
toegevoegd de auteur Dev, de bron
Ik denk dat ik eerst het native JavaScript moet leren voordat ik een geavanceerde technologie kan gebruiken. Ook moet ik JavaScript leren omdat ik me moet voorbereiden op een examen.
toegevoegd de auteur NinjaBoy, de bron
Is het mogelijk om tekstselectie uit te schakelen? Ik wil het laten lijken op een handicap controle.
toegevoegd de auteur NinjaBoy, de bron

2 antwoord

Als u wilt dat het element disabler over uw tabel wordt gelegd, voegt u er een negatieve marge aan toe. Zet ook opaciteit op een waarde lager dan 1, om de onderliggende tabel niet volledig te verbergen (verbergen).

 #disabler {
     opacity: 0.5;
     margin-bottom: -200px;
 }

Omdat je hebt gezegd dat je dit doet voor educatieve doeleinden, zal ik niet de volledige oplossing geven. Zie deze viool om aan de slag te gaan.

Als u een tekst 'niet selecteerbaar' wilt laten lijken, gebruikt u de volgende CSS:

-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-o-user-select: none;
user-select: none;
14
toegevoegd
@ChickenBoy Gebruik JavaScript. De hoogte van een element kan worden gewijzigd met behulp van element.style.height = height + "px"; (waarbij height een getal is) < code>. Gebruik element.offsetHeight` om de grootte van een element te krijgen. Zie jsfiddle.net/RAb8b/1 voor aanvullende JavaScript-code. Nogmaals: ik toon niet de volledige oplossing, alleen handige hints , zodat u iets leert. De beste manier om te leren is door ervaring op te doen en fouten te maken.
toegevoegd de auteur Rob W, de bron
@ChickenBoy Graag gedaan. Veel geluk met jouw examen ;)
toegevoegd de auteur Rob W, de bron
Bedankt maar hoe ga ik het automatisch laten aanpassen wanneer een nieuwe rij in de tabel wordt ingevoegd.
toegevoegd de auteur NinjaBoy, de bron
Heel erg bedankt. Je bent zo'n geweldige hulp !!!
toegevoegd de auteur NinjaBoy, de bron

U moet de div disabler boven aan de tabel plaatsen.

U kunt dit doen door de div absoluut te positioneren. Ik heb een nieuwe div, tableContainer toegevoegd die de disabler div en de tafel omhult, en absoluut de div positioneert.

<div id="tableContainer">   <!-- New Div-->
   <div id="disabler"></div>
   <table>....<table>
</div>

Add position: absolute; to the #disabler

And most importantly write the JavaScript to display and hide the div:

function disableTable()
{
  document.getElementById("disabler").style.display = "block";
}

function enableTable()
{
  document.getElementById("disabler").style.display = "none";
}

Live Example: http://jsbin.com/icuwug

1
toegevoegd