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

Answer 1

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