Click here to Skip to main content
15,029,333 members
Please Sign up or sign in to vote.
2.00/5 (1 vote)
See more:

How to make content in HTML table to read only.or disabled or how to apply stylesheet to do this using javascript?

thanks in advance.
ZurdoDev 21-Mar-12 7:48am
I don't understand? An HTML table already is read-only. Please clarify.
Sergey Alexandrovich Kryukov 21-Mar-12 16:35pm
Yes, the question is not really correct, but I guess, the table could contain input elements...
Sergey Alexandrovich Kryukov 21-Mar-12 16:49pm
In this way, it can makes sense. I answered in detail, please see.
[no name] 22-Mar-12 0:51am
HTML table contains various input element,instad of making disabled each of controls i want to disabled the completed HTML table or make its all input controls to readonly by applying stylesheet or using javascript.?
Mohamed Mitwalli 21-Mar-12 8:21am
could u clarify ??
Sergey Alexandrovich Kryukov 21-Mar-12 16:49pm
I guess I understand. I answered in detail, please see.
Mohamed Mitwalli 21-Mar-12 17:18pm
thx for clarify , it makes sense to me :)
solutions@ashish 21-Mar-12 8:53am
As I understand from your question, You want to make html table in the mode in which user can not copy the content from the table, If I am right, then this is impossible

If I am wrong, Then Please clarify Your question again

Sergey Alexandrovich Kryukov 21-Mar-12 16:36pm
No, OP never mentioned anything like that. The question is about read-only.
Sergey Alexandrovich Kryukov 21-Mar-12 16:50pm
So, this is quite possible. I answered in detail, please see.
Karthickeyan.k 21-Mar-12 13:46pm
Please clarify, copy means disable right functionality or ctrl+c keyboard shortcut disable???
Sergey Alexandrovich Kryukov 21-Mar-12 16:50pm
I guess it does not matter -- any event OP needs. I answered in detail, please see.

1 solution

An HTML table itself is always read-only, but you can have input elements in it. You can disable or enable them.

The manipulations should be complex enough, so it would be good to use jQuery. Please see:[^],[^].

This is how you enable/disable:
myInput = $("#myInput"); //example of using selectors; in this case, element is found by id="myInput"
myInput.attr("disabled", "disabled"); //disable
myInput.removeAttr("disabled"); //enable

To understand this code sample, you need to understand jQuery selectors and attributes:[^],[^].

If you want to enable/disable element of certain type, you can use type selectors, using ':'.

You will also need to be able to navigate in the table and collect several elements (to be enabled/disabled) at once, especially if you don't want to give them all distinct id. You can use type selectors or traversing:[^].

You cannot apply stylesheet, you can apply styles. To do this, you need to use class and .css methods:[^].

To get started, see:[^];
start with this one:[^].

Good luck,

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

CodeProject, 20 Bay Street, 11th Floor Toronto, Ontario, Canada M5J 2N8 +1 (416) 849-8900