"Disabling" an HTML table with Javascript

Question

I've seen this done in a lot of sites recently, but can't seem to track one down. Essentially I want to "disable" an entire panel (that's in the form on an HTML table) when a button is clicked.

By disable I mean I don't want the form elements within the table to be usable and I want the table to sort of fade out.

I've been able to accomplish this by putting a "veil" over the table with an absolutely positioned div that has a white background with a low opacity (so you can see the table behind it, but can't click anything because the div is in front of it). This also adds the faded effect that I want. However, when I set the height of the veil to 100% it only goes to the size of my screen (not including the scrolling), so if a user scrolls up or down, they see the edge of the veil and that's not pretty.

I'm assuming this is typically done in a different fashion. Does anyone have some suggestions as a better way to accomplish this?

user228534 · Accepted Answer · 2010-04-30 06:45:53Z

8

You could try javascript like:

function disable(table_id)
{
    var inputs=document.getElementById(table_id).getElementsByTagName('input');
    for(var i=0; i<inputs.length; ++i)
        inputs[i].disabled=true;
}

answered Apr 30, 2010 at 6:45

user228534

Sign up to request clarification or add additional context in comments.

1 Comment

Ismael Miguel Over a year ago

You are actually missing button, select and textareas. Those may need to be disabled as well.

Satya · Accepted Answer · 2012-01-04 11:03:38Z

3

Try the below with Jquery

$("#freez").click(function(){
    $('#tbl1').find('input, textarea, button, select').attr('disabled','disabled');
});
$("#unfreez").click(function(){
    $('#tbl1').find('input, textarea, button, select').removeAttr("disabled");
});

answered Jan 4, 2012 at 11:03

Satya

3,1282 gold badges22 silver badges26 bronze badges

1 Comment

Ismael Miguel Over a year ago

Instead of that long list, you can use :input. There will be some performance loss, but not that much. Possibly...

RBT · Accepted Answer · 2022-03-31 04:53:07Z

2

Disabling the inner elements of an HTML table can also be done using pointer-events CSS style as shown below:

table[disabled], table[disabled] input { pointer-events: none }

At any desired point in our JavaScript code, we can add disabled attribute to the parent table which will bring the CSS styling into effect:

let gameTable = document.getElementById('gameBoard');
gameTable.setAttribute('disabled', true);

edited Mar 31, 2022 at 4:53

answered Jan 11, 2019 at 10:20

RBT

26.3k24 gold badges178 silver badges267 bronze badges

1 Comment

dns_nx Over a year ago

this should be the answer.

user3712541 · Accepted Answer · 2020-06-02 18:47:56Z

1

Another way to do it would be using the opacity property.

function disablePanel(id) {
   var panel = document.getElementById(id);
   var inputs = panel.querySelectorAll('input, button'); //anything else can go in here
   for (var i=0; i<inputs.length; i++) {
      inputs[i].disabled = true;
   }

   panel.style.opacity = 0.3; //or any other value
}

answered Jun 2, 2020 at 18:47

user3712541

Comments

Karl Johan · Accepted Answer · 2010-04-30 06:44:12Z

0

Can't you just find out the height of the area in pixels with JavaScript? And then set the veil's height to that number?

I don't have the exact code in my head but offsetHeight might do the trick

answered Apr 30, 2010 at 6:44

Karl Johan

4,0421 gold badge28 silver badges36 bronze badges

1 Comment

Blair Jones Over a year ago

I ended up finding out the height of the document and using that to stretch the veil over the whole page instead of using just 100%: document.documentElement.clientHeight;

TheJediCowboy · Accepted Answer · 2010-04-30 06:43:19Z

Somebody please correct me if I am wrong, but I have seen Javascript and some derivate Javascript libraries that have a lot of options for accomplishing for what you would like to do. I have used the jQuery library to do some similar effects.

One thing to think about is what exactly you are trying to disable. Essentially tables are not interactive so disabling a table would not accomplish much. If it is the form elements within the table you want to disable. You can accomplish this using JavaScript.

Along with using JavaScript for disabling the form elements, you can also use it to change properties of the non interactive elements.

An example of this would be using JavaScript to change the color of the font and borders and other non interactive elements in the table to give the "look" of being disabled. Of course you still need to use JavaScript to disable the form elements.

Collectives™ on Stack Overflow

"Disabling" an HTML table with Javascript

6 Answers 6

1 Comment

1 Comment

1 Comment

Comments

1 Comment

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

6 Answers 6

1 Comment

1 Comment

1 Comment

Comments

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related