使用 jquery 更新表格行的背景颜色答案

【问题标题】：Update background color of table row using jquery使用 jquery 更新表格行的背景颜色
【发布时间】：2011-06-05 19:06:28
【问题描述】：

我使用以下 jquery 将外部 html 页面加载到名为 content 的 div 中：

$(document).ready(function(){
     $("#content").load("content.html");
});

(function($) {  
 $(function() {  
 $('.load_link').click(function() {  
    $("#content").load("content2.html");  
    return false;  
 });  
});  
})(jQuery);

触发内容更改的链接（使用<a class="load_link">）在表格的一行内。当有人单击链接时，我希望能够更新分配给表格行的类。包含单击的链接的行应分配为“rowselected”类，所有其他行（仅在该表中）应分配为“rownotselected”类。只有该表中的行使用这些类名，因此替换该类名的任何出现应该是安全的。

这可能吗？我是第一次使用 jquery。

提前感谢您的任何建议！

【问题讨论】：

你能提供你想要更新的表格的 HTML 吗？

标签： javascript jquery html

【解决方案1】：

怎么样：

 $('.load_link').click(function() {  
    $("#content").load("content2.html");  
    var $row = $(this).closest("tr");
    // find the parent <tr> and set the class
    $row.removeClass("rownotselected").addClass("rowselected");
    // Set the class of the other rows:
    $row.siblings("tr").removeClass("rowselected").addClass("rownotselected");
    return false;  
 });

使用closest() 查找父级tr
使用removeClass 和addClass 删除相应的类
使用siblings() 在当前表中查找同级行。

这是一个工作示例：http://jsfiddle.net/andrewwhitaker/vN2ny/

【讨论】：