asked on

Any way to get the original class name of an element?

I am using alternating row colors in addition to a row highlight when a delete checkbox is selected... I have all that working perfectly, except the "check all" box. I can get the rows to change color. But I can not get them to revert to their original class name. So, is there any other way than getElementById().className to get the class name of an element? Something like getElementById().Attribute.class ? Anything that will read the actual HTML mark up of the page and not the Javascript altered value of className.

archrajan

THEN U SHUD PUT THE original class name in another attribute say class2

<tr class = "class1" class2 = "class1">

and u can access it like

document.getElementById('my').getAttribute('class2') which will give u the class2 attribute but thats the same as className

archrajan

where the tr id is me

archrajan

see here for an example:
http://www.archanapatchirajan.com/ROWCOLOR.html

MaybeItsJeremy

ASKER

That will work. Thank you. :)

GwynforWeb

I doubt the above code will validate

You could also do this

<head>
<style>
.evenClass{background-color:red};
.oddClass{background-color:yellow};
</style>
<script>
function checkAll(){
tab=document.getElementById('myTab').rows
for (i=0;i<tab.length;i++)
tab[i].style.backgroundColor="gray"
}

function uncheckAll(){
tab=document.getElementById('myTab').rows
for (i=0;i<tab.length;i++)
if (i%2)
tab[i].style.backgroundColor='red'
else
tab[i].style.backgroundColor='yellow'
}
</script>
</head>

<body>
<table border="1" width="261" height="111" id="myTab">
<tr class="evenClass">
<td width="87" height="27">a</td>
<td width="87" height="27">a</td>
<td width="87" height="27">a</td>
</tr>
<tr class="oddClass">
<td width="87" height="28">a</td>
<td width="87" height="28">a</td>
<td width="87" height="28">a</td>
</tr>
<tr class="evenClass">
<td width="87" height="28">a</td>
<td width="87" height="28">a</td>
<td width="87" height="28">a</td>
</tr>
<tr class="oddClass">
<td width="87" height="28">a</td>
<td width="87" height="28">a</td>
<td width="87" height="28">a</td>
</tr>
</table>

<p><input type="checkbox" onclick="if (this.checked){checkAll()}else{uncheckAll()}">check all
</body>

GwynforWeb

too late :(.

I will merely outline my solution next time and not actually implement and test it. Silly me for doing so.

MaybeItsJeremy

ASKER

I apologize GwynforWeb. I was in a hurry to get the solution working, I don't care much about it not validating as I will just use the "title" attribute instead of something like class2. That will validate fine. Your effort is still much appreciated. :)

GwynforWeb

From http://validator.w3.org/ for http://www.archanapatchirajan.com/ROWCOLOR.html

Line 19, column 38: there is no attribute "CLASS2"

<tr id = "tr1" class = "red" class2 = "red">

You have used the attribute named above in your document, but the document type you are using does not support that attribute for this element. This error is often caused by incorrect use of the "Strict" document type with a document that uses frames (e.g. you must use the "Transitional" document type to get the "target" attribute), or by using vendor proprietary extensions such as "marginheight" (this is usually fixed by using CSS to achieve the desired effect instead).

This error may also result if the element itself is not supported in the document type you are using, as an undefined element will have no supported attributes; in this case, see the element-undefined error message for further information.

How to fix: check the spelling and case of the element and attribute, (Remember XHTML is all lower-case) and/or check that they are both allowed in the chosen document type, and/or use CSS instead of this attribute.

GwynforWeb

Using the title attribute will have the className displayed when you mouseover.

GwynforWeb

The solution is dreadfull and unbecoming of this site in my opinion.

MaybeItsJeremy

ASKER

Ah, I didn't think about it showing up in the mouseover.... how can I reverse my decision and accept another solution?

GwynforWeb

You will in the long run get a far better solution to your problem if you give it a little time for discussion and for feedback from you so the experts can craft the best solution to your problem. Post in CS ie https://www.experts-exchange.com/Community_Support/ if you want.

MaybeItsJeremy

ASKER

Done...Again, I aplogize to both of you.

archrajan

MaybeItsJeremy,
If u see the link, i posted i commented that this can be easily done in another way which wud validate.
But since the question read that u want the original class name to be reverted back i suggested that soluton.
Anyways Gwyn's solution shud be fine.
But i want to make a point that in the link i posted in the view source i have commented right before the <script> tag that this
can be easily done in another way..
You can award the points to Gwyn and that doesnt matter to me.
Thanks!

ASKER CERTIFIED SOLUTION

GwynforWeb

membership

This solution is only available to members.

To access this solution, you must be a member of Experts Exchange.

Start Free Trial

MaybeItsJeremy

ASKER

GwynforWeb, that is EXACTLY what I needed. Thank you. As soon as the question is reoped, I'll award the points to you. :)

GwynforWeb

thanks :-)

devic

here is archrajan's idea and it's valid.

http://home.arcor.de/athens/expexc/js/css/class2.html

also defined types of script/style tags ;)

GwynforWeb

Devic, At runtime you can add any garbage you want and the validator will not pick it up.

MaybeItsJeremy , Here is a more fine tuned version. A rows checked status can be found by then enquiring about its classname when the table is processed at submission time.

<head>
<style>
.evenClass{background-color:red};
.oddClass{background-color:yellow};
.checkClass{background-color:gray};
</style>

<script>
function checkAll(){
tab=document.getElementById('myTab').rows
for (i=0;i<tab.length;i++)
tab[i].className='checkClass'
}

function uncheckAll(){
tab=document.getElementById('myTab').rows
for (i=0;i<tab.length;i++)
if (i%2)
tab[i].className='evenClass'
else
tab[i].className='oddClass'
}

function checkIt(theRow){
if (theRow.className!='checkClass')
{theRow.className='checkClass'
return
}
index=theRow.rowIndex
if (index%2)
theRow.className='evenClass'
else
theRow.className='oddClass'
}
</script>

<body>
<table border="1" width="261" height="111" id="myTab">
<tr class="evenClass" onclick="checkIt(this)">
<td width="87" height="27">a</td>
<td width="87" height="27">a</td>
<td width="87" height="27">a</td>
</tr>
<tr class="oddClass" onclick="checkIt(this)">
<td width="87" height="28">a</td>
<td width="87" height="28">a</td>
<td width="87" height="28">a</td>
</tr>
<tr class="evenClass" onclick="checkIt(this)">
<td width="87" height="28">a</td>
<td width="87" height="28">a</td>
<td width="87" height="28">a</td>
</tr>
<tr class="oddClass" onclick="checkIt(this)">
<td width="87" height="28">a</td>
<td width="87" height="28">a</td>
<td width="87" height="28">a</td>
</tr>
</table>

<p><input type="checkbox" onclick="if (this.checked){checkAll()}else{uncheckAll()}">check all </p>
</body>

GwynforWeb

ps. thanks for the points.

devic

GwynforWeb,

your code is not valid with http://validator.w3.org/

also think about how long will your code if you have more classes :)

IHMO archrajan's idea is better

GwynforWeb

An what pray tell is fundementally invalid about the code I posted? (with the exception of doctype definition etc, which were clearly infered).

A concerning the "IHMO", thank you for sharing that with us. Remind me not to hire you.

devic

Gwyn,
If you test code from anothers in http://validator.w3.org/ , then maybe check your own code too :)

GwynforWeb

I gather your posts in thread have been for merely for nuisance effect, thanks.

devic

Gwyn, I just tested your code, and validation compatibility it's your suggestion :)

GwynforWeb

No Devic you are harrassing me and if you are trying to hound me out of this TA then well done cause you have done it. I have had enough of the crap that goes on around here . I am gone for good from this TA. Bye bye.

devic

I am not trying to hund anyone, I am just for justice. And as Expert I say my opinion and it counts.