How do I select table row using Jquery?

Question

I am trying to to select a table row using JQuery, but it seems not to fire the .selected event. I have put the code on JSFiddle

http://jsfiddle.net/tonymaloney1971/3tevxmps/1/

I would like a table row selected when the mouse is clicked and change row colour and display an alert message with the selected row information.

I have tried the following but it doesn't work:

    $("td").click(function () {
        $('.selected').removeClass('selected');
        $(this).addClass("selected");

    });

Any ideas?

Thanks

Your code seems to work just fine.. What is the problem with it? — putvande
– putvande, Commented Aug 8, 2014 at 8:18
Yes, but also display an alert box where it would should the selected row values. — user142617
– user142617, Commented Aug 8, 2014 at 8:47

Engin Üstün · Accepted Answer · 2014-08-08 08:56:56Z

10

try this: fiddle demo

you can add class each td like: "p" for product, "i" for inf Rate, "n" for note, and get in click event.

js changes:

$("tbody tr").click(function () {
    $('.selected').removeClass('selected');
    $(this).addClass("selected");
    var product = $('.p',this).html();
    var infRate =$('.i',this).html();
    var note =$('.n',this).html();
    alert(product +','+ infRate+','+ note);
});

css changes:

table.formatHTML5 tr.selected {
    background-color: #e92929 !important;
    color:#fff;
    vertical-align: middle;
    padding: 1.5em;
}

edited Aug 8, 2014 at 8:56

answered Aug 8, 2014 at 8:29

Engin Üstün

1,12811 silver badges18 bronze badges

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

2 Comments

user142617 Over a year ago

That's great, but any idea how to get the selected row field values and display in an alert message box?

user142617 Over a year ago

That is perfect, thank you very much for your help it is great learning from you guys!Please Vote this

YANTHO · Accepted Answer · 2014-08-08 08:20:18Z

1

You have to put the event on the table row (tr) and then change color of each table cell (td)

$("tr").click(function () {
        $('.selected').removeClass('selected');
        $(this).find("td").addClass("selected");

    });

answered Aug 8, 2014 at 8:20

YANTHO

897 bronze badges

Comments

super cool · Accepted Answer · 2014-08-08 08:37:24Z

0

You tr is inside tbody so you have to use something like this

$("#myTable tbody tr").live('click', function (event)
    {
           //adding class
           //removing class
    });

Note: live may not support in latest version of jquery . use ON accordingly

Working fiddle : http://jsfiddle.net/supercool/550nq015/

edited Aug 8, 2014 at 8:37

answered Aug 8, 2014 at 8:31

super cool

6,0653 gold badges34 silver badges67 bronze badges

2 Comments

Roko C. Buljan Over a year ago

so why than suggesting a method (.live()) that is long-time deprecated?

super cool Over a year ago

roko just in case if some one using jquery 1.8.3 and below . for 1.8.3 plus i suggested to use ON in place of live

Still Newbie · Accepted Answer · 2014-08-08 08:58:25Z

I checked your code.. Here is my solution.

First, the clickable element is a td element. So in JQuery function you need to ask the parent of this element. To do that you can do with this code.

$("td").click(function () {
            $('.selected').removeClass('selected');
            $(this).parents('tr').addClass('selected');

        });

It will add a class to your parent tr element from td that you click. I noticed the css you provide is only work with td element. So I write new rule for selected row element.

table.formatHTML5 tr.selected{
            background-color: #e92929 !important;
            vertical-align: middle !important;
            height: 4em;  
        }

otherwise, you can also add onClick html event for each tr elements displayed in the table.

Hope this answer helps you

Payam Khaninejad · Accepted Answer · 2019-07-02 06:28:01Z

0

the Shortest way:

CSS:

<style type="text/css">

    tr.selected {
        background-color: #e92929 !important;
        color: #fff;
        vertical-align: middle;
        padding: 1.5em;
    }

</style>

Jquery:

$(".table > tbody > tr").click(function (e) {
   $(this).addClass("selected").siblings().removeClass("selected");
});

answered Jul 2, 2019 at 6:28

Payam Khaninejad

8,0526 gold badges49 silver badges57 bronze badges

Collectives™ on Stack Overflow

How do I select table row using Jquery?

5 Answers 5

2 Comments

Comments

2 Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

2 Comments

Comments

2 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related