Question

我想在用户正在与之交互的表格行中添加一个漂亮的浅黄色突出显示。他们点击“A＆＃39; A＆＃39;链接到＆＃39; onclick＆＃39;使用jquery做函数的函数调用（不重要）。 onclick是在＆＃39; A＆＃39;标记和表格单元格＆＃39; TD＆＃39;。

这是表格单元格：

<td>
<a href="javascript:void(0);" 
onclick="deleteSchedule('Ajax/Admin_Delete_Schedule.cfm?SID=12345');"
title="Delete User"><img src="images/Delete_x16_.png" border="0"></a>
</td>

如何获取表格行的参考，然后设置背景颜色？我是否需要为每个表格行提供唯一的ID？

由于答案非常详细和优秀，我将添加以下内容：我想在我的功能中执行此操作，但我不确定如何使用＆＃39;这个＆＃39;。谢谢！！和OMG！ stackoverflow是最棒的!!!

我无法获得以下最接近或最近的父示例，但我确实让这个工作：

$(".rowClick").on("click", function() {
$(this).closest("tr").css('backgroundColor', '#FFFF99');
});

当然我添加了课程＆＃39; rowClick＆＃39;到了＆＃39; A＆＃39;标签。现在的问题是，当用户点击另一行时，结果是两行突出显示。有关从先前选定的行中删除突出显示的任何建议。（我猜测要更改所有表格行的背景颜色，然后设置点击的那一行。） - 再次感谢！

Answer 1

首先，不要使用内联onclick方法。设置适当的jQuery事件委托功能。所以做这样的事情：

$(function(){
    $('td a').click(function(e){
     // 'e' refers to the event target here
      var row = $(e.target).closest('tr');
      // Insert whatever color value where yellow is
      $(row).css('backgroundColor', 'yellow')
    })
})

更好的方法是创建一个像

这样的css类

.tr-highlighted { background: yellow; transition: 200ms linear; }

然后使用类切换功能

添加/删除该类

    $(function(){
    $('td a').click(function(e){
     // 'e' refers to the event target here
      var row = $(e.target).parent();
      // Insert whatever color value where yellow is
      $(row).toggleClass('tr-highlighted')
    })
})

如果您必须使用内联onclick声明，则上述内容仍然适用，但您需要在功能中访问this以引用事件目标，而不是e被作为一个论点传递。

或者，你可以在没有JS的情况下完成这项任务，如果你只想在人员盘旋在表格行上时突出显示它

tr:hover { background: yellow; transition: 200ms linear; }

Answer 2

要完成此任务，您可以使用jQuery .closest（）函数。

$("td").click(function(e){
    $(e.target).closest("tr").css("background-color","yellow");
    $(e.target).closest("tr").siblings().css("background-color","white");
});

这个简单的英文代码如下：

For each table cell that is clicked:

Find the nearest row and change its background color to yellow.
Find all of the other rows in the table and change their background colors to white.

http://jsfiddle.net/ogzankse/2/

编辑：我更改了代码以更好地反映您的情况。我没有将click事件监听器附加到行本身，而是在每行中添加了锚标记，并将监听器附加到该行。我在锚标记中添加了一个类，以便忽略表外的锚点。代码现在搜索所单击的<td>标记所在的<a>，然后找到最近的行并应用CSS。代码现在是：

$("a.intable").click(function(e){
    $(e.target).parent().closest("tr").css("background-color","yellow");
    $(e.target).parent().closest("tr").siblings().css("background-color","white");
});

http://jsfiddle.net/ogzankse/3/

Answer 3

我建议给锚点一个类名，即“rowClick”，并使用JavaScript将类切换到TR。

<tr>
    <td>
    ...
    <a class="rowClick">
    ...
    </td>
</tr>

CSS定义：

.bgYellow{ background-color: #FFFF00; }

这是使用jQuery的一个例子：

$(".rowClick").on("click", function() {
    $(this).closest("tr").addClass("bgYellow");
});

根据您正在做的事情，您可以将功能修改为toggleClass或其他misc。选项。

如何使用jquery从表行中的onclick中调用javascript函数来设置表行的突出显示？

3 个答案: