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

/

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

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

• javascript
• jquery
• css

• 2 Your code seems to work just fine.. What is the problem with it? – putvande Commented Aug 8, 2014 at 8:18
• Like this? – Mr. Alien Commented Aug 8, 2014 at 8:19
• You need to select the entire row, right ?? – Manish Kr. Shukla Commented Aug 8, 2014 at 8:21
• Yes, but also display an alert box where it would should the selected row values. – user142617 Commented Aug 8, 2014 at 8:47

5 Answers 5

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;
}

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");

    });

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/

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

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");
});