Learn how to a build a cloud-first strategyRegister Now

x
  • Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 1078
  • Last Modified:

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.
0
MaybeItsJeremy
Asked:
MaybeItsJeremy
  • 13
  • 5
  • 5
  • +1
1 Solution
 
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
 
archrajanCommented:
0
Concerto Cloud for Software Providers & ISVs

Can Concerto Cloud Services help you focus on evolving your application offerings, while delivering the best cloud experience to your customers? From DevOps to revenue models and customer support, the answer is yes!

Learn how Concerto can help you.

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

Featured Post

Free Tool: Subnet Calculator

The subnet calculator helps you design networks by taking an IP address and network mask and returning information such as network, broadcast address, and host range.

One of a set of tools we're offering as a way of saying thank you for being a part of the community.

  • 13
  • 5
  • 5
  • +1
Tackle projects and never again get stuck behind a technical roadblock.
Join Now