jquery制作隔行换色效果

最新推荐文章于 2024-08-04 16:33:59 发布

weixin_33973600

最新推荐文章于 2024-08-04 16:33:59 发布

阅读量171

点赞数

文章标签： javascript ViewUI

原文链接：https://my.oschina.net/xixios/blog/83477

版权

今天用jquery做了个各行换色效果更好的用jquery练习操作表格很简单
演示地址： http://www.iiwnet.com/js_window/1000.html
更多： JS特效
演示效果图

核心代码

<html>

<head>

<meta http-equiv='Content-Type' content='text/html; charset=gb2312' />

<title>JQuery鼠标经过表格行变色www.niutw.com</title>

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js" type="text/javascript"></script>

<!-- 上面的js是JQuery -->

<script type='text/javascript'>

$(function(){ //文档加载

$('#tb').width(520); //设置表格宽度为520像素

$('#tb').height(250); //设置表格的高度为250像素

$('#tb').css('background-color','#000000'); //设置表格背景颜色为黑色

$('tr').attr('bgColor','#FFFFFF'); //添加表格行的背景属性并设置为白色，注意这里的属性不是bgcolor而是bgColor

$('td').append(' '); //在所有单元格上添加空格

$('tr').hover(

function(){

$(this).addClass('hover'); //鼠标经过添加hover样式

},

function(){

$(this).removeClass('hover'); //鼠标离开移除hover样式

}

);

});

</script>

<style type='text/css'>

.hover{background-color:#FFF000;} /*这里是鼠标经过时的颜色*/

</style>

</head>

<body>

<table id='tb' border='0' cellpadding='0' cellspacing='1'>

<tr><td></td><td></td></tr>

<tr><td></td><td></td></tr>

<tr><td></td><td></td></tr>

<tr><td></td><td></td></tr>

<tr><td></td><td></td></tr>

<tr><td></td><td></td></tr>

<tr><td></td><td></td></tr>

<tr><td></td><td></td></tr>

<tr><td></td><td></td></tr>

<tr><td></td><td></td></tr>

</table>

</body>

</html>

转载于:https://my.oschina.net/xixios/blog/83477