How to disable and enable HTML table using Javascript?

Question

I want to know how can I disable and enable the highlighting on an HTML table using Javascript by clicking an html button.

Here are my codes:

tabletest.html

<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>

Whenever I click the Disable button the table highlighting is still enabled. I'm kinda new to this so I really need your help.

`disabled` means that a form control won't be submitted and can't be edited. Tables are not form controls, so what you are asking for makes no sense. — Quentin, Oct 26 '11 at 06:49
Here's what I want to happen. When I click the 'Disable' button, I want the row highlighting and all the effects be removed. — NinjaBoy, Oct 26 '11 at 06:55

score 3 · Accepted Answer · answered Oct 26 '11 at 07:33

<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

score 2 · Answer 2 · answered Mar 26 '19 at 08:10

<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>

score 2 · Answer 3 · edited May 23 '17 at 11:58

2

You can not disable a table. What do you want to achieve with this? The tables are read only anyway.

If you have input tags in the table, you can disable those one by one.

See also "Disabling" an HTML table with javascript

edited May 23 '17 at 11:58

Community

1
1

answered Oct 26 '11 at 06:49

PiTheNumber

22,828
17
107
180

I want it to look a disabled html button. – NinjaBoy Oct 26 '11 at 06:52
But a table is not a button. You can change the table class and define the disabled style via CSS: , CSS: .disabled tr { background-color: gray; }
– PiTheNumber Oct 26 '11 at 06:56

RobG · Answer 4 · 2011-10-26T07:15:11.783

If you want it to "look" disabled or enabled, add class rules to a style sheet and add classes to the table for enabled or disabled.

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, ''));
  }
}

score 2 · Answer 5 · answered Oct 26 '11 at 07:30

2

This will remove the onmouseover events from your tr's.

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

answered Oct 26 '11 at 07:30

roel

2,005
3
26
41

score 1 · Answer 6 · answered Oct 26 '11 at 07:08

1

A table cannot be disabled. What you want to do is disable the input button and have class on the HTML Table that gives sort of the illusion of fading out/ graying out on the onclick event of the button you choose.

answered Oct 26 '11 at 07:08

CPerez721

65
8

Can you pls give me a hint how to do this. Im really new to this thing. Thanks – NinjaBoy Oct 26 '11 at 07:09
Add a class to your HTML table. Say (table.class) Now on the onclick event for the button that you choose to have "Disable" displayed on it, make sure that the onclick event fires up the new styles for the html table. (You can go a few routes here i.e JQuery, CSS3 Opacity properties) – CPerez721 Oct 26 '11 at 07:17
I think the piece of code RobG wrote is way to complicated for a simple procedure. There's no need for REGEX in his problem. – CPerez721 Oct 26 '11 at 07:24

score 1 · Answer 7 · answered Oct 26 '11 at 07:13

You cannot disable a table. A table just displays data - in HTML you can only disable form elements like inputs, selects and textareas, so you cannot interact with them anymore (ie type data in it, click it or select an option).

I think what you are trying to achive is to having the events onMouseOver/-Out remove on button click? You might be better off to use jQuery - take a look at Events. The solution is to add and remove events on button click like in this fiddle.

score 1 · Answer 8 · answered Oct 26 '11 at 07:15

Follow this recipe:

Define two sets of CSS rules. One set of rules always starts with table.enabled, the other with table.disabled

To enable/disable the whole table, locate the DOM element (using document.getElementbyId('tblTest') when the table has the id tblTest) and assign the respective class:

document.getElementbyId('tblTest').classname = enabled ? 'enabled' : 'disabled';

score 1 · Answer 9 · answered Oct 26 '11 at 07:17

1

If you want to make the table "unclickable" at any place of it - you may add a transperent div above with the same size.

answered Oct 26 '11 at 07:17

Michael Sazonov

1,531
11
21

score -1 · Answer 10 · answered Mar 24 '19 at 11:57

-1

A entire table with input fields can be blocked by keeping the table in "fieldset" tag and disable it via Javascript

answered Mar 24 '19 at 11:57

Sai Kishore

37
4

please provide your solution base on OP source code – Hien Nguyen Mar 24 '19 at 12:15

How to disable and enable HTML table using Javascript?

10 Answers10

Linked