columns样式 jquery_jQuery对表格进行类样式

pageEncoding="utf-8"%>

Jquery演示示例

#tb{

border:1px solid blue;

width: 500px;

border-collapse: collapse;

cursor:point;

}

#tb td{

border:1px solid blue;

padding:3px;

}

#tb th{

background: gray;

padding: 3px;

}

.even{

background:red;

}

.over{

background: yellow;

}

$(function(){

$("#td tr:odd").addClass("even");//给奇数行添加类样式

//分两步实现

/* $("#tb tr:gt(0)").mouseover(function(){

//注意，这里的this对象是js-dom对象，如果想调用jQuery中的方法，得转化成JQuery中的对象

$(this).addClass("over");

});

$("#tb tr:gt(0)").mouseout(function(){

$(this).removeClass("over");

}); */

//行云流水

$("#tb tr:gt(0)").mouseover(function(){

$(this).addClass("over");

}).mouseout(function(){

$(this).removeClass("over");

});

});

姓名	年龄	电话
张三	22	13107172719893
王五	42	13107176587271
西欧	32	1310121323893
李四	22	13107172719893

--%>

pageEncoding="UTF-8"%>

JQuery演示示例

#tb{

border: 1px solid blue;

width:500px;

border-collapse: collapse;

cursor:point;

}

#tb td{

border: 1px solid blue;

padding:3px;

}

#tb th{

background:gray;

padding:3px;

}

.even{

background: red;

}

.over{

background: yellow;

}

$( function(){

$("#tb tr:odd").addClass("even"); //给奇数行添加类样式

/*分两步实现

$("#tb tr:gt(0)").mouseover(function(){

//注意，这里的this对象是js-dom对象，如果想调用jQuery中的方法，得转换成JQuery对象

//alert( this instanceof $); //false

$(this).addClass("over");

});

$("#tb tr:gt(0)").mouseout(function(){

$(this).removeClass("over");

});

*/

//行云流水

$("#tb tr:gt(0)").mouseover(function(){

$(this).addClass("over");

}).mouseout(function(){

$(this).removeClass("over");

});

});

姓名	年龄	电话
张三	22	13512345678
张三	22	13512345678
张三	22	13512345678
张三	22	13512345678
张三	22	13512345678