JQuery给table动态增加样式

本例子操作的table表的class为stripe

//将dom对象转换成jquery对象 

$(document).ready(
   function() {

    //如果鼠标移到class为stripe的表格的tr上时，执行函数
    $(".stripe tr").mouseover(function() {
     $(this).addClass("over");
    });

    //给这行添加class值为over，并且当鼠标一出该行时执行函数
    $(".stripe tr").mouseout(function() {
     $(this).removeClass("over");
    });

    //点击变色,注意：因为有隔行变色，所以这里必须在触发toggleClass时,remove("alt").
    //$(".stripe tr").click(function() { //移除该行的class
    // $(this).toggleClass("click");
    // $(this).removeClass("alt");
    //});

    //给class为stripe的表格的所有行添加class值为alt
    $(".stripe tr").addClass("alt");

    //给class为stripe的表格的偶数行添加class值为odd
    //$(".stripe tr:even").addClass("odd");

    //给class为stripe的表格的奇数行添加class值为alt
    //$(".stripe tr:odd").addClass("alt");

    //给class为stripe的表格的最后一行添加class值为last
    $(".stripe tr:last").addClass("last");

    //隐藏奇数tr,点击偶数tr使其下一个tr隐藏或者显示
    //$('.stripe').find('tr:odd').hide().end().find('tr:even').click(
    //  function() {
    //   var answer = $(this).next();
    //   if (answer.is(':visible')) {
    //    answer.slideUp();
    //   } else {
    //    answer.slideDown();
    //   }
    //  });
    
    //选择了所有的tr元素，然后去除了包含有th子元素的tr元素,加上点击事件
    $('.stripe').find('tr').not(":has(th)").click(function(){alert("I was clicked!");});
    
    //隐藏table第一tr和最后tr之外的所有tr
    //$('.stripe').find('tr').not(":first").not(":last").hide();
    
    //1.点击第一tr隐藏或显示其它tr
    //$('.stripe').find('tr:first').click(function() {
     //.next(),.nextAll,.prev(),.prevAll(),.parent(),.andself()
    // $(this).nextAll().not(":last").each(function() {
    //  if ($(this).is(':visible')) {
    //   $(this).slideUp();
    //  } else {
    //   $(this).slideDown();
    //  }
    // });
    //});
    
    //2.点击第一tr隐藏或显示其它tr
    //$('.stripe').find('tr:first').toggle(function() {
    // $('.stripe').find('tr').not(":first").not(":last").hide('slow');
    //}, function() {
    // $('.stripe').find('tr').not(":first").not(":last").show('fast');
    //});
    
    //3.点击第一tr隐藏或显示其它tr
    $('.stripe').find('tr:first').toggle(function() {
     $('.stripe').find('tr').not(":first").not(":last").animate({
      height: 'hide',
      opacity: 'hide'
     }, 'slow');
    }, function() {
     $('.stripe').find('tr').not(":first").not(":last").animate({
      height: 'show',
      opacity: 'show'
     }, 'slow');
    });
    
   });