Geek Answers Handbook

How to make html look disabled?

I read on some forums that to turn off the display of the html table, you need to add a div layer. My problem is that I do not know how to do this.

I have 3 questions:

1.) How to set the height of the div, which will automatically adjust to the height of the table when the table increases its height when adding a new row.

2.) How do I make a div cover the table. I do not know how layers of html elements.

3.) How will I encode javascript that will make my table look disabled when I click the Disable button and turn it on again when I click the Enable button.

tabledisabletest.html

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

</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;
 }

 #disabler {
  width: 100%;
  height: 200px;
  background-color: #bbb;
  opacity:0.6;
 }
</style>
</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>

I have a div disablerto do the disconnect, but I can't get it to cover the table.

Please help me with this. I am so new to this. Thanks in advance.

+5
2

, disabler , . , opacity 1, () .

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

, , . .

, "unselectable", CSS:

-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-o-user-select: none;
user-select: none;
+12

div disabler .

, div. div, tableContainer, divabler div , div.

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

position: absolute; #disabler

javascript div:

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

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

Live : http://jsbin.com/icuwug

+1

More articles:


All Articles