jquery - How to properly alternate the color of html row using javascript in Rails 3? - Stack Overflow

admin管理员组

文章数量:1415111

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 bo 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;
}

#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>

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 bo 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;
}

#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>

• javascript
• jquery
• ruby-on-rails
• css
• html-table

Share Improve this question Follow edited Apr 7, 2011 at 6:29 Hussein 42.8k2525 gold badges115115 silver badges143143 bronze badges asked Apr 7, 2011 at 4:10 johanjohan 2,32999 gold badges2727 silver badges3737 bronze badges

Add a ment  | 

6 Answers 6

Sorted by: Reset to default 3

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 patible 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.

    <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/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.

本文标签： jqueryHow to properly alternate the color of html row using javascript in Rails 3Stack Overflow