如何在使用jquery单击表行的一个单元格时高亮显示该行

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

只是想知道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>

---

您可以使用jQuery将一个类添加到单击的td的父tr中：

你可以：

$('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添加样式，如背景色。

为每个TR标记分配唯一id，并编写onclick函数。并在onclicktr_id函数中传递TR id。在该函数中，使用背景色属性

如果有人单击表行中的任何一个，则可以对该行执行单击事件

像这样：

$'tr'。单击，函数{ $'tr'.removeClass'active'； $this.addClass'active'； };

---

您希望向单击的行中添加一个highlight类，并将其从所有其他行中删除，例如

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

然后在你的css中，有一些类似于

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

关键是将highlight类添加到tr，但实际上将背景高光颜色应用到tds。显示的css将为您实现这一点

---

下面是一个

您可以将单击处理程序设置为“tr”

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

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

---

如果需要同时高亮显示多行：

JQuery：

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

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

CSS:

如果一次只需要高亮显示一行，请执行以下操作：

JQuery：

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

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

CSS:

---

JSFIDLE:

到目前为止，您得到的js代码可能在哪里重复？查找行很容易，类似于单击处理程序中的$this.parent应该可以做到这一点。

.highlight {
    background-color: red;
}