CODEWITHSUNDEEP
javascriptjquery
user1283258
user1283258

Reputation:

Highlight table row with some background color

I am using rails3 and on my page i am iterating a loop which have some records and i want when

user click on some row its color will be green and when he again click some row its color will

be green and the color of previous highlighted row should be none.

Thanks in advance

My code is like this 

    <div class="top-heading-detail-admin">


    <div class="table-headings">
      <div class="email-admin"><p>Email</p></div>
      <div class="date-admin"><p>Date Added</p></div>
      <div class="added-by-admin"><p>Added by</p></div>

    </div>
   <div id="checkbox_list">
       <% @users.each do |user| %>
         <div class="email-admin-detail"><%= user.email %></div>
         <div class="date-admin-detail"><%= user.created_at.strftime("%m/%d/%Y") unless  user.created_at.blank? %></div>
         <div class="added-by-admin-detail"><%= user.added_by %></div>
         </div>
       <% end %>
    </div>

  </div>

Upvotes: 0

Views: 193

Answers (2)

Kashiftufail
Kashiftufail

Reputation: 10885

I think you should use table why you are using div tags for table.If you want to highlight

row using this.Try out this code i think its work..But you need to make an extra div inside it

 <div id="checkbox_list">
    <% @users.each do |user| %>
    <div id="<%= user.id %>" onclick="admin_select('<%=user.id%>')" class="admin-select">
      <div class="email-admin-detail"><%= user.email %></div>
      <div class="date-admin-detail"><%= user.created_at.strftime("%m/%d/%Y")%></div>
      <div class="added-by-admin-detail"><%= user.added_by %></div>
    </div>
<% end %>

i am making extra div and give this user id and also call onclick javascript event on it.

Here is jquery code for it

 function admin_select(id) {
$(".admin-select").children().each(function () {
    $(this).removeClass("color_class");
});
$("#" + id).children().each(function () {
    $(this).addClass("color_class");
});

}

Check it....

Upvotes: 0

Andreas Wong
Andreas Wong

Reputation: 60506

http://jsfiddle.net/r8mY4/9/

I wrapped your user details row in a div then applied a click event, please check if that's what you want :)

$('.user-details').click(function() {
    $('.user-details').css('background', 'transparent');
    $(this).css('background', 'green');
});​

Upvotes: 1

Related Questions