Multiple row select in HTML without the use of checkbox

Question

I want to select multiple rows in a table without using a checkbox. Is there any way to do this?

Markus Hedlund · Accepted Answer · 2011-01-18 10:42:49Z

0

If it's just visually select you're after, it's very possible with Javascript and CSS.

Using jQuery, or some other JS library, you can add a HTML class to the row on click. Then use CSS to style that class.

jQuery:

$('tr').click(function(){ $(this).toggleClass('selected'); });

CSS:

tr.selected { background: #ccc; }

answered Jan 18, 2011 at 10:42

Markus Hedlund

24.4k22 gold badges82 silver badges113 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

John Parker Over a year ago

Of course, there's no reason why you couldn't back this with a hidden field that effectively emulated a checkbox from the form processor's perspective. That said, graceful degradation would be an issue. :-)

Lightness Races in Orbit Over a year ago

@middapark: "why you couldn't"* presumably :)

John Parker Over a year ago

@Tomalak Geret'kal Yup. Fixified. Ta for the heads up. :-)

Markus Hedlund Over a year ago

Yes, but I wouldn't bother hiding the checkbox. This solution should really be an extension of the checkbox, for 508 compliance at least.

Community · Accepted Answer · 2017-05-23 10:33:08Z

0

I am not sure if this is related, but take a look at this SO question.

It's using jQuery UI Selectable to perform a drag selection. You can the demo here and here for grid like setting.

edited May 23, 2017 at 10:33

CommunityBot

11 silver badge

answered Jan 18, 2011 at 10:45

Jimmy Chandra

6,5904 gold badges29 silver badges38 bronze badges

Collectives™ on Stack Overflow

Multiple row select in HTML without the use of checkbox

2 Answers 2

4 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

4 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related