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.
MaybeItsJeremyAsked:
Who is Participating?
 
GwynforWebConnect With a Mentor Commented:
this may or may not be what you need, give feed back :-)

<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='yellow'
   else
    tab[i].style.backgroundColor='red'
}

function checkIt(theRow){
 if (theRow.style.backgroundColor!="gray")
  {theRow.style.backgroundColor="gray"
   return
  }
 index=theRow.rowIndex
 if (index%2)
  theRow.style.backgroundColor='yellow'
 else
  theRow.style.backgroundColor='red'
}
</script>
</head>

<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 </body>
</body>
0
 
archrajanCommented:
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
0
 
archrajanCommented:
where the tr id is me
0
Free Tool: Port Scanner

Check which ports are open to the outside world. Helps make sure that your firewall rules are working as intended.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

 
archrajanCommented:
0
 
MaybeItsJeremyAuthor Commented:
That will work. Thank you. :)
0
 
GwynforWebCommented:
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>
0
 
GwynforWebCommented:
too late :(.

 I will merely outline my solution next time and not actually implement and test it.  Silly me for doing so.
0
 
MaybeItsJeremyAuthor Commented:
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. :)
0
 
GwynforWebCommented:
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.
0
 
GwynforWebCommented:
Using the title attribute will have the className displayed when you mouseover.
0
 
GwynforWebCommented:
The solution is dreadfull and unbecoming of this site in my opinion.
0
 
MaybeItsJeremyAuthor Commented:
Ah, I didn't think about it showing up in the mouseover.... how can I reverse my decision and accept another solution?
0
 
GwynforWebCommented:
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 http://www.experts-exchange.com/Community_Support/ if you want.
0
 
MaybeItsJeremyAuthor Commented:
Done...Again, I aplogize to both of you.
0
 
archrajanCommented:
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!
0
 
MaybeItsJeremyAuthor Commented:
GwynforWeb, that is EXACTLY what I needed. Thank you. As soon as the question is reoped, I'll award the points to you. :)
0
 
GwynforWebCommented:
thanks :-)
0
 
devicCommented:
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 ;)
0
 
GwynforWebCommented:
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>
0
 
GwynforWebCommented:
ps. thanks for the points.
0
 
devicCommented:
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
0
 
GwynforWebCommented:
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.
0
 
devicCommented:
Gwyn,
If you test code from anothers in http://validator.w3.org/ , then maybe check your own code too :)
0
 
GwynforWebCommented:
I gather your posts in thread have been for merely for nuisance effect, thanks.
0
 
devicCommented:
Gwyn, I just tested your code, and validation compatibility it's your suggestion :)
0
 
GwynforWebCommented:
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.
0
 
devicCommented:
I am not trying to hund anyone, I am just for justice. And as Expert I say my opinion and it counts.
0
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

All Courses

From novice to tech pro — start learning today.