Home/ Questions/Q 4267096
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-21T06:51:06+00:00

I have successfully put highlighting in my table but the problem is with alternating

  • 0

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

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    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>
    • 0