用JQuery实现表格隔行变色和突出显示当前行的代码
更新时间：2012年02月10日 17:44:58 作者：
用JQuery实现表格隔行变色和突出显示当前行的代码，需要的朋友可以参考下
复制代码 代码如下:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>表格隔行背景和突出显示当前行</title>
<script type="text/javascript" src="jquery-1.4.2.min.js"></script>
<style type="text/css">
body{ margin:0 auto; font-size:12px;}
.data_list td{ width:100px;}
</style>
<script type="text/javascript">
/* 当鼠标移到表格上是，当前一行背景变色 */
$(document).ready(function(){
$(".data_list tr td").mouseover(function(){
$(this).parent().find("td").css("background-color","#d5f4fe");
});
})
/* 当鼠标在表格上移动时，离开的那一行背景恢复 */
$(document).ready(function(){
$(".data_list tr td").mouseout(function(){
var bgc = $(this).parent().attr("bg");
$(this).parent().find("td").css("background-color",bgc);
});
})
$(document).ready(function(){
var color="#ffeab3"
$(".data_list tr:odd td").css("background-color",color); //改变偶数行背景色
/* 把背景色保存到属性中 */
$(".data_list tr:odd").attr("bg",color);
$(".data_list tr:even").attr("bg","#fff");
})
</script>
</head>
<body>
<table class="data_list">
<tr><td> 100 </td> <td> 100 </td><td> 100 </td><td> 100 </td><td> 100 </td></tr>
<tr><td> 100 </td> <td> 100 </td><td> 100 </td><td> 100 </td><td> 100 </td></tr>
<tr><td> 100 </td> <td> 100 </td><td> 100 </td><td> 100 </td><td> 100 </td></tr>
<tr><td> 100 </td> <td> 100 </td><td> 100 </td><td> 100 </td><td> 100 </td></tr>
<tr><td> 100 </td> <td> 100 </td><td> 100 </td><td> 100 </td><td> 100 </td></tr>
<tr><td> 100 </td> <td> 100 </td><td> 100 </td><td> 100 </td><td> 100 </td></tr>
<tr><td> 100 </td> <td> 100 </td><td> 100 </td><td> 100 </td><td> 100 </td></tr>
<tr><td> 100 </td> <td> 100 </td><td> 100 </td><td> 100 </td><td> 100 </td></tr>
</table>
</body>
</html>
相关文章
这篇文章主要介绍了jQuery实现简易商城系统项目实操，文章围绕主题展开详细的内容介绍，具有一定的参考价值，感兴趣的小伙伴可以参考一下2022-06-06
这篇文章主要介绍了jQuery实现遍历XML节点和属性的方法,涉及jQuery针对xml文件的加载、节点遍历等相关操作技巧,需要的朋友可以参考下2018-04-04
这篇文章主要介绍了jQuery提示框插件SweetAlert用法,结合实例形式分析了SweetAlert提示框插件基本功能、使用方法及配置项设置方法,需要的朋友可以参考下2019-08-08
这篇文章主要为大家详细介绍了jQuery焦点图左右转换效果,具有一定的参考价值，感兴趣的小伙伴们可以参考一下2016-12-12
使用jQuery中的when实现多个AJAX请求对应单个回调的例子分享
我在为 Mozilla Developer Network(Mozilla开发者社区) 写代码时需要加载的一个普通的的脚本文件,以及一个JSON流。 因为我们使用jQuery,这意味着需要调用 jQuery.getScript 和 jQuery.getJSON 函数2014-04-04
jQuery基于ajax实现页面加载后检查用户登录状态的方法
这篇文章主要介绍了jQuery基于ajax实现页面加载后检查用户登录状态的方法,结合实例形式较为详细分析了jQuery结合ajax进行表单登陆验证操作的具体步骤与相关操作技巧,需要的朋友可以参考下2017-02-02
碰到没有固定高或者固定宽或者固定高和宽的时候，我们就需要用JS去处理，去动态获取当前窗口高或者宽；今天弄了2种情况，一个是相对于屏幕窗体，一个是相对于当前的窗口，看代码2013-04-04
下面小编就为大家带来一篇jquery取消事件冒泡的三种方法(推荐)。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧2016-05-05
这篇文章主要为大家详细介绍了基于jQuery封装的分页组件，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2017-06-06
这篇文章主要为大家详细介绍了jquery实现倒计时小应用，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2017-09-09
最新评论