如何使用 Jquery 选择表格行？答案

【问题标题】：How do I select table row using Jquery?如何使用 Jquery 选择表格行？
【发布时间】：2019-07-02 14:28:01
【问题描述】：

我正在尝试使用 JQuery 选择表行，但似乎不会触发 .selected 事件。我已经把代码放在了 JSFiddle

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

我希望在单击鼠标时选择表格行并更改行颜色并显示带有所选行信息的警报消息。

我尝试了以下方法，但它不起作用：

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

    });

有什么想法吗？

谢谢

【问题讨论】：

您的代码似乎运行良好.. 有什么问题？
Like this?
你需要选择整行，对吧？？
是的，但还会显示一个警告框，它应该选择行值。

标签： javascript jquery css

【解决方案1】：

试试这个：fiddle demo

您可以为每个 td 添加类，例如：“p”代表产品，“i”代表 inf Rate，“n”代表注释，并进入点击事件。

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

【讨论】：

很好，但是知道如何获取选定的行字段值并显示在警报消息框中吗？
太完美了，非常感谢您的帮助，向你们学习非常棒！请投票

【解决方案2】：

您必须将事件放在表格行（tr）上，然后更改每个表格单元格的颜色（td）

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

    });

【讨论】：

【解决方案3】：

你的 tr 在 tbody 里面，所以你必须使用这样的东西

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

注意： live 在最新版本的 jquery 中可能不支持。相应地使用ON

工作小提琴： http://jsfiddle.net/supercool/550nq015/

【讨论】：

那么为什么不推荐一种长期不推荐使用的方法 (.live())？
roko 以防万一有人使用 jquery 1.8.3 及以下版本。对于 1.8.3 plus，我建议使用 ON 代替 live

【解决方案4】：

我检查了你的代码。这是我的解决方案。

首先，可点击元素是一个 td 元素。因此，在 JQuery 函数中，您需要询问该元素的父级。为此，您可以使用此代码。

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

        });

它会为您单击的 td 中的父 tr 元素添加一个类。我注意到您提供的 css 仅适用于 td 元素。所以我为选定的行元素编写了新规则。

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

否则，您也可以为表格中显示的每个tr元素添加onClick html事件。

希望这个答案对你有帮助

【讨论】：

【解决方案5】：

最短路径：

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

【讨论】：