A User-Friendly Table - What Solution?

Question

Today, this is my table and if I select one of the row, it shows a select icon.

I want to make it more user-friend that you can see the whole row to be selected. Gmail has that functionality.

In my case, it is different because I have different color for every second row.

The question is how to make it more userfriendly in order to see a selected row instead of using icone symbol?

You also need to take account that I have 60 row and the user should be enable to select row i different row in different location in the table.

If I add a new background color if the row is selected, can it make it less userfriendly because there is too much color inside of table?

Any solution would be appreciated.

Thanks!

Answer 1

I am not a big fan of alternating background colors between rows. White space and visual grouping should do the trick in most cases.

In your case, I would use a lower contrast between the background colors. Use just enough so that the eye notices the change.

As far as selection, I don't see anything wrong with using a different background color, a stronger one this time.

Answer 2

Have you thought about a simple border for selection?

Here is a simple example: jsfiddle

Answer 3

If I'm interpreting you correctly, you can do this with jQuery. Once you've installed it, add a click event to each row that toggles a "selected" class:

$(document).on('click', 'tr', function(event){$(event.target).toggleClass('selected');})

If you have different "odd" and "even" classes for every other row, you CSS should look like this:

    .odd{
    ...
    }
    .odd.selected{
    ...
    }
    .even{
    ...
    }
    .even.selected{
    ...
    }

Keep in mind that toggling can be done without jQuery: https://stackoverflow.com/questions/18880890/how-do-i-toggle-an-elements-class-in-pure-javascript and even without JavaScript: https://stackoverflow.com/questions/25543956/toggle-class-on-html-element-without-jquery.