alternate row colors in a list

[abcdefGARY]

hello, I'm trying to alternate row colors, but the examples I can find online require you to use tables...

im looking for something, like js, to alternate row colors in a list. for example:


<div id="list">
<ul>
<li>item 1</li>
<li>item 2</li>
<li>item 3</li>
<li>item 4</li>
<li>item 5</li>
</ul>
</div>

the list items in the id "list" will have alternating colors. is there anything like this out there? or am i stuck with tables.

thanks

[abcdefGARY]

got it!

http://codingforums.com/showthread.php?p=578977

[lwc]

If you ask me, you'd be better off if you Highlight Table Cells (http://www.dynamicdrive.com/dynamicindex11/highlighttable.htm).

Although personally I don't even use a script for that. I just write this in every TR (which is more annoying than the script but still beats using a long script):

<tr onMouseOver=this.className='trGridHoov' onMouseOut=this.className='trGrid'>
And the CSS is:

<style type="text/css"><!--
.trGrid { background-color: white}
.trGridHoov { background-color: #fef5d8}
--></style>

[abcdefGARY]

If you ask me, you'd be better off if you Highlight Table Cells (http://www.dynamicdrive.com/dynamicindex11/highlighttable.htm).

Although personally I don't even use a script for that. I just write this in every TR (which is more annoying than the script but still beats using a long script):

<tr onMouseOver=this.className='trGridHoov' onMouseOut=this.className='trGrid'>
And the CSS is:

<style type="text/css"><!--
.trGrid { background-color: white}
.trGridHoov { background-color: #fef5d8}
--></style>there's a reason why I don't like using tables, and that's because of seo purposes. and I already know about your code, however, it is not any easier and involves you to code each table row by hand, which is not very effective and can only be used for static html pages.

[lwc]

Why do you quote my entire post if you post directly after me?

Anyway, it's not true. You can use code (even Javascript) to build dynamic tables.

For example, I just use:

build(contents of column1-row 1, contents of column1-row 2)
build(contents of column2-row 1, contents of column2-row 2)
...
build(contents of column5-row 1, contents of column5-row 2)
where "build" is a table building Javascript function that does the special TR thing automatically.

Also, if you use this site's script, then by default it's not a manual work.

[codeexploiter]

The less we use tables the better. I don't know why you are insisting on using tables?

[lwc]

Because I rather have dynamic highlighting than alternate row colors.

[abcdefGARY]

I really don't see how having the code below with a simple javascript:


<li>sdflskdflskdf</li>
<li>sdflskdflskdf</li>
<li>sdflskdflskdf</li>
<li>sdflskdflskdf</li>

is harder than:


<tr onMouseOver=this.className='trGridHoov' onMouseOut=this.className='trGrid'>sdflskdflskdf</tr>
<tr onMouseOver=this.className='trGridHoov' onMouseOut=this.className='trGrid'>sdflskdflskdf</tr>
<tr onMouseOver=this.className='trGridHoov' onMouseOut=this.className='trGrid'>sdflskdflskdf</tr>
<tr onMouseOver=this.className='trGridHoov' onMouseOut=this.className='trGrid'>sdflskdflskdf</tr>
<tr onMouseOver=this.className='trGridHoov' onMouseOut=this.className='trGrid'>sdflskdflskdf</tr>

LOL

[alexjewell]

Haha, abcdefGARY has a point. Tables are sometimes way too complex, when there are much easier ways to do the same thing. They have their place...but you can usually find a better way. I like the way you got on the other forum. :)