<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>表格</title>
<script src="jquery.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function(){
$("#ta tr").mouseover(function(){
$(this).addClass("over");
});
$("#ta tr").mouseout(function(){
$(this).removeClass("over");
});
$("#ta tr:even").addClass("double");
});
</script>
<style type="text/css">
th{
background: gray;
color: white;
}
table{
width: 30em;
height: 10em;
}
td {
border-bottom:1px solid #95bce2;
text-align:center;
}
tr.over td{
background: #D6E8F8;
font-weight: bold;
}
tr.double td{
background: #DAF3F1;
}
</style>
</head>
<body>
<table id="ta" border="0" cellpadding="0" cellspacing="0">
<tr>
<th>姓名</th>
<th>年龄</th>
<th>籍贯</th>
<th>手机</th>
</tr>
<tr>
<td>alp</td>
<td>zweizig</td>
<td>上海</td>
<td>13088888888</td>
</tr>
<tr>
<td>alp</td>
<td>zweizig</td>
<td>上海</td>
<td>13088888888</td>
</tr>
<tr>
<td>alp</td>
<td>zweizig</td>
<td>上海</td>
<td>13088888888</td>
</tr>
<tr>
<td>alp</td>
<td>zweizig</td>
<td>上海</td>
<td>13088888888</td>
</tr>
<tr>
<td>alp</td>
<td>zweizig</td>
<td>上海</td>
<td>13088888888</td>
</tr>
<tr>
<td>alp</td>
<td>zweizig</td>
<td>上海</td>
<td>13088888888</td>
</tr>
<tr>
<td>alp</td>
<td>zweizig</td>
<td>上海</td>
<td>13088888888</td>
</tr>
<tr>
<td>alp</td>
<td>zweizig</td>
<td>上海</td>
<td>13088888888</td>
</tr>
<tr>
<td>alp</td>
<td>zweizig</td>
<td>上海</td>
<td>13088888888</td>
</tr>
</table>
</body>
</html>
- 大小: 28.8 KB
分享到:
相关推荐
主要介绍了jQuery插件实现表格隔行变色及鼠标滑过高亮显示效果代码,涉及jQuery针对页面元素动态操作及响应鼠标事件动态修改页面元素样式的相关技巧,需要的朋友可以参考下
本文实例讲述了jQuery实现Table表格隔行变色及高亮显示当前选择行效果。分享给大家供大家参考,具体如下: 最近客户要求高亮选择列表的功能,于是顺便做了个,作为记录。 前台代码: <!DOCTYPE ...
jquery选取商品隔行变色
jquery表格隔行变色鼠标滑过竖直表格内容变色效果
jQuery动态生成隔行变色的table,使用jQuery+css+json实现
下面小编就为大家带来一篇jQuery轻松实现表格的隔行变色和点击行变色的实例代码。小编觉得挺不错的,现在分享给大家,也给大家做个参考,一起跟随小编过来看看吧
jquery table鼠标滑过隔行变色表格样式代码
jquery table ui插件制作css表格隔行变色特效代码
一天搞定jQuery(二)——使用jQuery表格的隔行换色
jquery实现表格隔行换色和鼠标经过提示效果源码
下面一个示例为大家详细介绍下使用jquery实现表格的隔行换色功能,感兴趣的朋友可以参考下
网页中表格隔行颜色变化 jquery 表格换色 网页中表格隔行颜色变化 jquery 表格换色 网页中表格隔行颜色变化 jquery 表格换色 网页中表格隔行颜色变化 jquery 表格换色
隔行着色 代码如下: $(‘#table1 tr:odd’).addClass(‘odd’); $(‘#table1 tr:even’).addClass(‘even’); 效果: 2. 高亮含有特定数据的行 代码如下: $(“#table2 tr:contains(‘Fuck’)”).addClass(...
主要为大家详细介绍了实现jquery隔行变色效果,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
本文实例讲述了jQuery实现简单隔行变色的方法。分享给大家供大家参考,具体如下: <!DOCTYPE html PUBLIC -//W3C//DTD XHTML 1.0 Transitional//EN http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd> &...
Demo2--隔行,滑动,点击 变色.+ 多选框选中的行 变色.
jquery表格变色jquery表格变色jquery表格变色jquery表格变色jquery表格变色jquery表格变色jquery表格变色jquery表格变色jquery表格变色jquery表格变色jquery表格变色jquery表格变色