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

Answer 1

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

Answer 2

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

Answer 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");
});

Answer 4

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 logic, we can add disabled attribute to the parent table as shown below which will bring the CSS styling into effect:

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

Answer 5

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.

Answer 6

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
}