Disabling a table

[gentsquash]

With a JS [javascript] dynamically created table

elt = document.createElement("table");
// Statements filling in the table.
document.body.appendChild(elt);

I'd like to do the equivalent of

elt.disabled = true;

and to be able to easily undo it. I'd like the table to go
gray, and to not respond to onClick nor onMouseOver.

What is some elegant JS+CSS way to do this? I had thought
perhaps of changing a CSS-class assigned to the table,
but I don't see how this will work, since individual <td>
cells have had explicit "onclick=" values assigned.

The only _general_ method I've been able to think of is to

.cloneNode(true)

the entire table [will this copy all the HTML attributes?
All the CSS values?]

and store it in a JS variable, then iterate over all the
nodes of the original table, and clear all "onclick=" and
set all colors to gray.

--gentsquash, Mathematics dept, Univ. of Florida


PS: I would like the method to work under
Firefox on MacOS, at a minimum.

 

[Stanimir Stamenkov]

Sun, 1 Jun 2008 11:46:04 -0700 (PDT), /[email protected]/:

With a JS [javascript] dynamically created table

elt = document.createElement("table");
// Statements filling in the table.
document.body.appendChild(elt);

I'd like to do the equivalent of

elt.disabled = true;

and to be able to easily undo it. I'd like the table to go
gray, and to not respond to onClick nor onMouseOver.

What is some elegant JS+CSS way to do this? I had thought
perhaps of changing a CSS-class assigned to the table,
but I don't see how this will work, since individual <td>
cells have had explicit "onclick=" values assigned.

Assign a class (say "disabled") to the table which will enable to
style it appropriately and make your cell 'click' handler(s) check
whether the table has the class applied. Am I missing something
obvious?