使用Jquery+CSS实现的表格隔行凸显和当前行高亮效果

最新推荐文章于 2022-03-01 13:00:37 发布
最新推荐文章于 2022-03-01 13:00:37 发布
阅读量1.7k 收藏 1
点赞数 1
文章标签： jquery css function class xhtml firefox
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/xxd851116/article/details/3279279
版权

我几次想尝试终于被我弄成功了！

前提条件：将jquery-1.2.6.js导入进来，<script src="jquery-1.2.6.js" type="text/javascript"></script> ，jquery-1.2.6.js可以去http://jquery.com/官网下。

本代码优化后支持IE和Firefox，只需在table属性设置width和class="stripe"即可，废话少说，直接附源代码：

<!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>StripingTable</title>
<script src="jquery-1.2.6.js" type="text/javascript"></script>
<!--将jQuery引用进来-->
<script type="text/javascript">
$(document).ready(function(){
    $(".stripe tr").mouseover(function(){
        $(this).addClass("over");
 }).mouseout(function(){
  $(this).removeClass("over");
 })
    $(".stripe tr:even").addClass("alt");
});
</script>
<style type="text/css">
<!--
 .stripe { border-collapse:collapse; font-size:12px;margin-left: auto; margin-right: auto;}
 th { background:#0066FF; color:#FFFFFF; line-height:20px; height:30px;border:1px solid #95bce2;} 
 td { padding:6px 11px; border-bottom:1px solid #95bce2; border-right:1px solid #95bce2; vertical-align:top; text-align:center;}
 tr > td:first-child { border-left:1px solid #95bce2;} 
 tr.alt { background:#ecf6fc;}  /*这行将给所有的tr加上背景色*/
 tr.over { background:#bcd4ec;} /*这个将是鼠标高亮行的背景色*/
-->
</style>
</head>
 
<body>
<table class="stripe" width="50%">
<!--用class="stripe"来标识需要使用该效果的表格-->
<thead>
  <tr>
    <th>姓名</th>
    <th>年龄</th>
    <th>QQ</th>
    <th>Email</th>
  </tr>
</thead>
<tbody>
  <tr>
    <td>笑的自然</td>
    <td>23</td>
    <td>306046832</td>
    <td>xiudong851116@163.com</td>
  </tr>
  <tr>
    <td>笑的自然</td>
    <td>23</td>
    <td>306046832</td>
    <td>xiudong851116@163.com</td>
  </tr>
  <tr>
    <td>笑的自然</td>
    <td>23</td>
    <td>306046832</td>
    <td>xiudong851116@163.com</td>
  </tr>
  <tr>
    <td>笑的自然</td>
    <td>23</td>
    <td>306046832</td>
    <td>xiudong851116@163.com</td>
  </tr>
  <tr>
    <td>笑的自然</td>
    <td>23</td>
    <td>306046832</td>
    <td>xiudong851116@163.com</td>
  </tr>
  <tr>
    <td>笑的自然</td>
    <td>23</td>
    <td>306046832</td>
    <td>xiudong851116@163.com</td>
  </tr>
</tbody>
</table>
<p align="center">笑的自然于2008年11月12日最后编辑...</p>
</body>
</html>

笑的自然
关注
  • 1
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
html5支持多中浏览器写法,html5及css3对table表格高亮当前行列的多浏览器兼容写法...
weixin_39644494的博客
06-03 130
html5能轻松实现高亮当前行、指定奇偶行颜色(斑马色)，但纯用css3实现列方向就比较困难，而且在老式IE浏览器也不能兼容。本例就是实现行列高亮，并且兼容IE。本例需要用到jquery。body {font: normal 11px auto "Trebuchet MS", Verdana, Arial, Helvetica, sans-serif;color: #4f6b72;backgrou...
2.2 css学习
蟑螂恶霸的博客
03-12 145
CSS全称叫做层叠样式表Cascading Style Sheets，是用来修饰HTML网页的一门技术，增强网页的展示能力。主要是使用CSS属性来实现，最终可以将css代码和HTML网页代码进行分离，也可以提高css代码的复用性。根据其代码位置可以分为以下三类：首先我们来看一个案例： 这个案例中，我们使用了内部CSS，在HTML代码里使用style标签,包裹着CSS代码，其共有4行代码：CSS 规则由两个主要的部分构成：选择器，以及一条或多条声明: 选择器通常是您需要改变样式的 HTML 元素。每条声明由一
仅CSS的简单行和列突出显示
CSS 初学者指南
06-26 781
在CSS中，突出显示表格的行非常简单。 tr:hover { background: yellow; } tr:hover { background: yellow; }在那里做得很好。 但是突出显示列一直比较棘手，因为没有单个HTML元素是列中表格单元格的父元素。 少量JavaScript可以轻松处理它，但是Andrew Howe最近通过电子邮件给我分享了他在StackOverflow上发现...
css3表格突出显示.zip
07-03
css3表格突出显示
CSS+HTML实例集合二，表格行颜色间隔显示，加有鼠标移入移出高亮效果，还有单击选中高亮再单击消除高亮
知识搬运工，资料任你拿，包括书籍、电影、电视剧、网站、软件等，VX公人人人号：向前书局
10-10 3787
CSS_HTML实例集合二，表格行颜色间隔显示，加有鼠标移入移出高亮效果，还有单击选中高亮再单击消除高亮 无标题文档 table{ border:1px solid #0000FF; width:500px; border-collapse:collapse;/*将表格边框与单元格边框合并*/} table td,table th{ border:#990000
jQuery插件实现表格隔行变色及鼠标滑过高亮显示效果代码
10-22
在这个例子中，我们将深入探讨如何使用jQuery创建一个插件，以实现表格隔行变色以及鼠标滑过时的高亮显示效果。 首先，我们来看一下基本的HTML结构，这里包含了一个简单的表格，用于展示插件的效果： ```html ...
jQuery实现Table表格隔行变色及高亮显示当前选择行效果示例
10-20
主要介绍了jQuery实现Table表格隔行变色及高亮显示当前选择行效果,涉及jQuery针对table元素遍历、运算、样式及鼠标事件动态响应相关操作技巧,需要的朋友可以参考下
jQuery+CSS实现图片感应鼠标高亮显示当前图片
06-10
在网页设计中，提升用户体验是至关重要的，而“jQuery+CSS实现图片感应鼠标高亮显示当前图片”就是一种常见的交互式设计技术。这种技术可以使用户更容易聚焦于当前操作的图片，增强视觉效果，同时提供更直观的操作...
jQuery插件实现表格隔行换色且感应鼠标高亮行变色
01-19
js代码： css代码： 代码如下: tr.alt td { background:#ecf6fc; /*这行将给所有的tr加上背景色*/ } tr.over td { background:#bcd4ec; /*这个将是鼠标高亮行的背景色*/ }
CSS 控制表格行的颜色
iteye_9657的博客
10-21 250
鼠标经过表格变色样式: table { background-color:#000000; cursor:hand; width:100%; } td { /*设置onmouseover事件*/ onmouseover: expression(onmouseover=function (){this.style....
jQuery+CSS美化一个漂亮的表单实例
05-12
内容索引:脚本资源,jQuery,表单美化　　jQuery+CSS美化出的一个漂亮的表单，用了jQuery1.2，有一个背景图片。已打包。 　　鼠标经过表单内的每一个输入框时自动切换背景，当前的输入框和其它的颜色是不一样的。
CSS放大当前行的图文列表
11-12
CSS放大当前行的图文列表,很好的效果，指向当前行的时候，着重显示当前行。一目了然，效果明显。
Jquery + CSS 制作条纹table表格
03-03
一个不错的条纹表格，鼠标移动到某行上可以高显当前行。 文档首次转载的时候可以出现奇偶相间的条纹效果，便于阅读。 下载后你就知道啦。。。哈哈。。
CSS操作数据内容样式
Y_ooo的博客
01-19 759
CSS操作数据内容样式 1.表格 （1）CSS定制表格 display:table... 表格可以非常快速的部署数据，灵活控制表格样式是必要的。 样式规则 说明 table 对应 table table-caption 对应 caption table-row 对表 tr table-row-group 对应 tbody table-header-group 对应 thead table-footer-group 对应 tfoot <article class=
js+css 控制表格隔行着色，单行高亮
weixin_34107739的博客
05-28 158
代码片段如下： <styletype="text/css"media="screen"> table{border-collapse:collapse;border:solid#999;border-width:1px001px;} tabletd{border:solid#999;border-width:01px1px0;} ...
CSS鼠标点击触发高亮
qq_46418241的博客
03-01 2895
css就是为了美化控件，充实窗口 我习惯用ui控件的改变样式表改变css代码 整个窗口的css代码 鼠标点击可以看到按下去 /* 设置按钮的属性 */ QToolButton[objectName="a1Button"] { border:0px; /*取消按钮边界，使按钮透明*/ color:white; } **``` 鼠标点击可以看按下去并且变色的原理是换了图片** ```cpp /* 设置按钮的属性 */ QToolButton[objectName="safeButton"] { borde
jQuery实现行背景颜色的交替显示
weixin_30755709的博客
12-12 118
//显示单双行显示不同背景色【方法一】：// $("#UL_id li:even").attr("className","redClass");//显示单双行显示不同背景色【方法二】：$("#UL_id li:even").addClass("redClass"); <ul id="UL_id"><li>单数</li><l...
jquery方式的表格效果（隔行变色，单行高亮）
@奮 鬥@的专栏
02-22 1268
表格                   $(document).ready(function(){        $("#ta tr").mouseover(function(){         $(this).addClass("over");        });        $("#ta tr").mouseout(function(){         $(this)
Css解决表格超出部分用省略号显示
weixin_43574787的博客
07-22 656
table中只规定列的百分比，而不具体给px值，用以下样式 table{ //固定布局的算法。在这种算法中，表格和列的宽度取决于col对象的宽度总和，假如没有指定，则会取决于第一行每个单元格的宽度。 假如表格没有指定宽度( width )属性，则表格被呈递的默认宽度为 100% （注意：此样式是关键） 　　table-layout: fixed; }　　　　　　　　　　　　　 .ellipsis...
jquery表格隔行变色和当前行变色
最新发布
04-11
根据描述，似乎您是问如何使用jQuery改变表格行的颜色和当前行的颜色。 要改变表格行的颜色，可以选择使用CSS或jQuery。如果选择使用CSS，则可以使用以下代码： ``` tr { background-color: #ddd; } ``` 如果...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值