JSFiddle

Question

我的网页上有一个包含多行和多列的表。当用户点击任何行单元格时，我需要突出显示一个表行。

只是想知道这是否可以用jquery。

e.g。如果用户点击80，表格的第二行需要突出显示。

我想问题可能是找到行，因为我们可以轻松地向该行添加一个类以突出显示它。

有什么想法吗？

<table style="width:100%">
    <tr>
        <td>Jill</td>
        <td>Smith</td>
        <td>50</td>
    </tr>
    <tr>
        <td>Eve</td>
        <td>Jackson</td>
        <td>94</td>
    </tr>
    <tr>
        <td>John</td>
        <td>Doe</td>
        <td>80</td>
    </tr>
</table>

Answer 1

您可以通过向已点击的tr的父td添加一个类来实现jQuery：

$(function() {
    $('td').click(function() {
        $('tr').removeClass('active');
        $(this).parent().addClass('active'); 
    });
});

JSFiddle

Answer 2

你可以：

$('td').on('click', function () {
  // Remove previous highlight class
  $('tr').removeClass('myAwesomeClass');

  // Get parent <tr> element
  var parent = $(this).parent();

  // Add a class to your parent row
  parent.addClass('myAwesomeClass');
});

创建css以将样式添加到.myAwesomeClass，例如背景颜色。

Answer 3

如果有人点击该行中的任何<td>，您可以在表格行上执行点击事件。

像这样：

$('tr').on('click', function(){ $('tr').removeClass('active'); $(this).addClass('active'); });

JSFiddle

Answer 4

您想要为所点击的行添加一个高亮类，并将其从所有其他行中删除，这样就像....

$('table tbody').on('mousedown', 'tr', function(e) {
    $(this).addClass('highlight').siblings().removeClass('highlight');
})

然后在你的CSS中，有一些类似......的内容。

tbody > tr.highlight > td {
    background: #500;
}

关键是您要将高亮类添加到tr，但实际上是将背景高亮颜色应用于tds。显示的CSS将为您执行此操作。

这是 plunker

Answer 5

您可以将点击处理程序设置为＆＃39; tr＆＃39;

$("table").on("click", "tr", function(){
    //remove class from any previous click
    $("table tr").removeClass("clicked");

    //add class to current row
    $(this).addClass("clicked");
});

Answer 6

如果您需要一次突出显示多行：

JQuery：

$("td").on("click", function () {
    $(this).parent().addClass('highlight');
});

CSS：

.highlight {
    background-color: red;
}

如果一次只需要突出显示一行：

JQuery：

$("td").on("click", function () {
    $("tr").each(function () {
        $(this).removeClass('highlight');
    })
    $(this).parent().addClass('highlight');
});

CSS：

.highlight {
    background-color: red;
}

JSfiddle：http://jsfiddle.net/ghorg12110/8bbc7vbu/

Answer 7

为每个TR标记分配唯一ID并写入onclick（）函数。并在该onclick（tr_id）函数中传递TR id。在该函数中使用背景颜色属性。

如何使用jquery单击其中一个单元格时突出显示表行

7 个答案:

JSFiddle