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
– Quentin, Commented Oct 26, 2011 at 6: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
– NinjaBoy, Commented Oct 26, 2011 at 6:55

Some Guy · Accepted Answer · 2011-10-26 07:33:39Z

<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

RobG · Accepted Answer · 2011-10-26 07:15:11Z

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

roel · Accepted Answer · 2011-10-26 07:30:57Z

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, 2011 at 7:30

roel

2,0033 gold badges26 silver badges42 bronze badges

Comments

Community · Accepted Answer · 2017-05-23 11:58:44Z

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, 2017 at 11:58

CommunityBot

11 silver badge

answered Oct 26, 2011 at 6:49

PiTheNumber

23.7k17 gold badges114 silver badges191 bronze badges

2 Comments

NinjaBoy Over a year ago

I want it to look a disabled html button.

PiTheNumber Over a year ago

But a table is not a button. You can change the table class and define the disabled style via CSS: <table class="disabled">, CSS: .disabled tr { background-color: gray; }

Sai Kishore · Accepted Answer · 2019-03-26 08:10:28Z

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

CPerez721 · Accepted Answer · 2011-10-26 07:08:23Z

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, 2011 at 7:08

CPerez721

558 bronze badges

3 Comments

NinjaBoy Over a year ago

Can you pls give me a hint how to do this. Im really new to this thing. Thanks

CPerez721 Over a year ago

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 Over a year ago

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.

Peavey · Accepted Answer · 2011-10-26 07:13:54Z

1

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.

answered Oct 26, 2011 at 7:13

Peavey

3022 silver badges11 bronze badges

Comments

Aaron Digulla · Accepted Answer · 2011-10-26 07:15:18Z

1

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

answered Oct 26, 2011 at 7:15

Aaron Digulla

330k111 gold badges626 silver badges840 bronze badges

Comments

Michael Sazonov · Accepted Answer · 2011-10-26 07:17:58Z

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, 2011 at 7:17

Michael Sazonov

1,53311 silver badges21 bronze badges

Comments

Sai Kishore · Accepted Answer · 2019-03-24 11:57:59Z

-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, 2019 at 11:57

Sai Kishore

374 bronze badges

1 Comment

Hien Nguyen Over a year ago

please provide your solution base on OP source code

Collectives™ on Stack Overflow

How to disable and enable HTML table using Javascript?

10 Answers 10

Comments

Comments

Comments

2 Comments

Comments

3 Comments

Comments

Comments

Comments

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

10 Answers 10

Comments

Comments

Comments

2 Comments

Comments

3 Comments

Comments

Comments

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related