CODEWITHSUNDEEP
javascriptjqueryruby-on-railscsshtml-table
johan
johan

Reputation: 2329

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

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

Upvotes: 1

Views: 2690

Answers (6)

Alex Blakemore
Alex Blakemore

Reputation: 11896

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.

Upvotes: 1

nickgrim
nickgrim

Reputation: 5437

@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'">
...

Upvotes: 1

Hussein
Hussein

Reputation: 42818

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/

Upvotes: 1

Sreekumar P
Sreekumar P

Reputation: 6050

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>

Upvotes: 1

corroded
corroded

Reputation: 21564

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.

Upvotes: 3

Malk
Malk

Reputation: 11983

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>

Upvotes: 1

Related Questions