开发者

Update background color of table row using jquery

I used the following jquery to load an external html page into a div named content:

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

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

The link (using <a class="load_link">) that triggers the change of content is within a row in a table. I'd like to be able to update the class assigned to a row of a table when someone clicks a link. The row that contains the link clicked should be assigned the class "rowselected" and all other rows (in that table only) should be assigned the class "rownotselected". Only rows in this table use those class names so it should be safe to replace any occurrence of that class name.

It this possible? I'm using jquery f开发者_如何学Cor the very first time.

Thanks in advance for any advice!


How about:

 $('.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;  
 }); 
  • Find the parent tr using closest()
  • Use removeClass and addClass to remove the appropriate classes
  • Using siblings() to find sibling rows in the current table.

Here's a working example: http://jsfiddle.net/andrewwhitaker/vN2ny/

0

上一篇:

下一篇:

精彩评论

暂无评论...
验证码 换一张
取 消

最新问答

问答排行榜