如何使用Jquery选择表格行? [英] How do I select table row using Jquery?

问题描述

我正在尝试使用JQuery选择一个表行，但是似乎不触发.selected事件.我已经将代码放到了JSFiddle

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

    });

有什么想法吗?

谢谢

推荐答案

尝试一下: fiddle演示

您可以在每个td上添加类，例如:"p"代表产品，"i"代表汇率，"n"代表备注，并获得点击事件.

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

js更改:

$("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更改:

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

这篇关于如何使用Jquery选择表格行?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！