“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) whe

Answer 1

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 2

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

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 5

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