How to properly alternate the color of html row using javascript in Rails 3?_问答_开发者

I have successfully put highlighting in my table but the problem is with alternating the row color. The row color is alternating only after the row is highlighted. In other words, when the page is first loaded or refreshed, all the row color is colored white which is the default. I want to fix this in a way that whether its first time loading the page or it is refreshed the color is already alternating. By the way, I used a combo of JavaScrpt, and embedded ruby for this.

Here is the code fragment for my index.html.erb:

<table id="table_list">
 <tr onMouseOver="this.className='highlight'" onMouseOut="this.className='<%= cycle :odd, :even %>'">
  <td> Data 1 </td>
  <td> Data 2 </td>
 </tr>
</table>

and on my CSS:

<pre>
#table_list{
  border: solid 1px #666;
  border-collapse: collapse;
  margin: 10px 0;
}

#table_list th{
  font-size: 12px;
  color: #FFF;
  background-color: #404C99;
  padding: 4px 8px;
  padding-bottom: 4px;
  text-align: left;
开发者_如何学JAVA}

#table_list .highlight {
    background-color: yellow;
}

#table_list td {
  font-size: 12px;
  padding: 2px 6px;
}

#table_list .even td {
  background-color: #E3E6FF;
}

#table_list .odd td {
  background-color: #D1D8F6;
}

</pre>

You don't need the onmouseout. use the css:

tr:hover {
  background-color: yellow;
}

instead. Then in your table:

<table id="table_list">
  <tr class="<%= cycle('odd', 'even') %>">
    <td> Data 1 </td>
    <td> Data 2 </td>
  </tr>
</table>

if you want it compatible to IE(I believe :hover doesn't work on non anchor elements in IE), you can use JS(or jquery to do the hover for you.

Here you can use JQuery for this coloring purpose.

You might find the :even and :odd selectors useful.

You could then use them like this (Working Copy):

Your can download jquery from jquery.com

    <style>
        #table_list .even td
        {
            background-color: #E3E6FF;
        }
        #table_list .odd td
        {
            background-color: #D1D8F6;
        }
        #table_list td.hover
        {
            background-color: green !important;
        }
    </style>

    <script language="javascript">

        $(document).ready(function() {

            $('#table_list').find('tr>td').hover(function() {
                //$(this).css("background-color", "green");
                $(this).addClass('hover');
            }, function() {
                //$(this).css("background-color", "inherit");
                $(this).removeClass('hover');
            });
            $('#table_list  tr:even').addClass('even');
            $('#table_list tr:odd').addClass('odd');

        });



    </script>

    <body>
        <form id="form2">
        <div>
            <table id="table_list">
                <tr>
                    <td>
                        1
                    </td>
                    <td>
                        Babu
                    </td>
                </tr>
                <tr>
                    <td>
                        2
                    </td>
                    <td>
                        Satheesh
                    </td>
                </tr>
                <tr>
                    <td>
                        3
                    </td>
                    <td>
                        Ramesh
                    </td>
                </tr>
                <tr>
                    <td>
                        4
                    </td>
                    <td>
                        Venki
                    </td>
                </tr>
                <tr>
                    <td>
                        5
                    </td>
                    <td>
                        Abhishek
                    </td>
                </tr>
            </table>
        </div>
        </form>

Set the starting class.

<table id="table_list">
 <tr class='<%= cycle :even, :odd %>' onMouseOver="this.className='highlight'" onMouseOut="this.className='<%= cycle :odd, :even %>'">
  <td> Data 1 </td>
  <td> Data 2 </td>
 </tr>
</table>

Use jQuery's nth-child. Assuming we want to alternate between li tags, we do the following.

$('#test li:nth-child(odd)').addClass('odd');

You can do the same for your td's or any other element.

Check working example at http://jsfiddle.net/T4Ywt/1/

@johan, the reason your code doesn't work is because the Ruby code that does the cycling between odd and even is only run once, when the page is loaded. If you load index.html and then look at the source for it in your browser you'll see something like:

...
 <tr onMouseOver="this.className='highlight'" onMouseOut="this.className='odd'">
...

This task got a lot simpler with CSS3, which added the :nth-child() pseudo-selectors.

tr:nth-child(even) {
    background-color: #E3E6FF; 
}

tr:nth-child(odd) {
    background-color: #D1D8F6; 
}

Now you don't need to set a class for your table rows, just to style even and odd rows separately. So no need for Rails or JQuery calls for that, and the CSS solution automatically handles changes to the table structure.