jquery方式的表格效果（隔行变色，单行高亮）

最新推荐文章于 2022-05-31 10:34:05 发布
最新推荐文章于 2022-05-31 10:34:05 发布
阅读量1.2k 收藏
点赞数
分类专栏： 网络通讯
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/love_gaohz/article/details/8601716
版权
<!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=UTF-8" />  
   <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("even");
  $("#ta tr:odd").addClass("odd");  
    });  
   </script>  
   <style type="text/css">  
th{  
background: gray;  
color: white;  
}  
  
table{  
width: 40em;  
height: 10em;  
}  
  
td {  
   /* border-bottom:1px solid black;  */
    text-align:center;  
}  
  
tr.over td{  
background: red;  
font-weight: bold;  
color:White;
}  
  
tr.even td{  
background: #0c212b;  
}  
tr.odd td{  
background: #1a2933;  
}  


   </style>  
</head>  
  
<body>  
   <table id="ta" border="0" cellpadding="0" cellspacing="0">  
    <tr>  
     <th></th>  
     <th>年龄</th>  
     <th>籍贯</th>  
     <th>手机</th>  
    </tr>  
    <tr>  
     <td>  <span>First name:<input type="text" name="fname" /></span></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><img src= "INFORMATION.jpg"></img></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>  
helmsgao
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
使用jQuery实现表格隔行换色，点击一行显示高亮颜色
qq_52959651的博客
11-27 1738
使用jQuery实现表格隔行换色，点击一行显示高亮颜色 以下是案例图 这是css样式文件 table { border:0;border-collapse:collapse;} td { font:normal 12px/17px Arial;padding:2px;width:100px;} th { font:bold 12px/17px Arial;text-align:left;padding:4px;border-bottom:1px solid #333;} .even { backg
分别使用js和JQuery实现简单的表格隔行变色以及高亮显示
bigLiu66的博客
09-18 1133
一、1.1隔行变色html 表格 使用&lt;thead&gt;和&lt;tbody&gt;标签拆分表头和内容 &lt;table border="1" width="500" height="50" align="center" id="tb1"&gt; &lt;thead&gt; &lt;tr&gt;
jquery实现控制表格行高亮
Golden的专栏
05-28 172
&lt;style&gt; .height{ background:#666666; /*背景颜色为灰色*/ } tr{ cursor: pointer; /*手形*/ } &lt;/style&gt; &lt;body&gt; &lt;table border="1" width="40%"&gt; &lt;tr&gt;&lt
JQuery实现单行变色表格（附代码）
weixin_46726346的博客
08-15 538
效果展示： 代码： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> th {
jQuery实现表格隔行变色
叶为正的博客
11-06 4594
隔行变色 在很多项目中，当然可以避免使用table，而使用div来替代，但是为了能够快速的交付项目，而且对网络优化以及搜索引擎没有太高的妥协的话，我们当然可以使用喜闻乐见的表格来进行布局。使用表格布局非常适合项目团队中有很多都是新成员，技术尚未成熟到可以从容判断div的布局会带来什么问题的情况。下面是使用table进行布局实现表格中隔行变色以及关键字高亮显示的jQuery实现。 这里要注意几个
jQuery表格之隔行变色
Java技术
07-15 1528
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> table { margin: auto; } </style> <...
jQuery插件实现表格隔行变色及鼠标滑过高亮显示效果代码
10-22
在这个例子中，我们将深入探讨如何使用jQuery创建一个插件，以实现表格隔行变色以及鼠标滑过时的高亮显示效果。 首先，我们来看一下基本的HTML结构，这里包含了一个简单的表格，用于展示插件的效果： ```html ...
jQuery实现Table表格隔行变色及高亮显示当前选择行效果示例
10-20
主要介绍了jQuery实现Table表格隔行变色及高亮显示当前选择行效果,涉及jQuery针对table元素遍历、运算、样式及鼠标事件动态响应相关操作技巧,需要的朋友可以参考下
jQuery轻松实现表格的隔行变色和点击行变色的实例代码
10-22
下面小编就为大家带来一篇jQuery轻松实现表格的隔行变色和点击行变色的实例代码。小编觉得挺不错的，现在分享给大家，也给大家做个参考，一起跟随小编过来看看吧
JQuery操作表格(隔行着色,高亮显示,筛选数据)
01-21
隔行着色 代码如下: $(‘#table1 tr:odd’).addClass(‘odd’); $(‘#table1 tr:even’).addClass(‘even’); 效果： 2. 高亮含有特定数据的行 代码如下: $(“#table2 tr:contains(‘Fuck’)”).addClass(...
使用jQuery实现表单隔行换色
聆听
01-11 5238
jQuery的基本过滤选择器： odd：匹配所有索引值为奇数的元素，从0开始计数 even：匹配所有索引值为偶数的元素，从0开始计数 我们用到了jQuery所有需要jQuery的js <%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="U...
elementui表格单行高亮用法及高亮样式无效问题解决
Let_me_tell_you的博客
05-31 3140
element table 数据表格指定行高亮写法 table写法 <el-table :row-class-name="tableRowClassName" > </el-table> 重点：数据表格上添加动态绑定样式，:row-class-name="tableRowClassName"。 method中添加切换样式方法 tableRowClassName({row, rowIndex}) { if (rowIndex ==
利用JavaScript制作简单的表格单行变色
m0_53024100的博客
04-17 564
在网上经常会看到这样长长的表格，当表格过于复杂时难免看花眼，不知道自己看的是哪一行。 而今天咱们就做一个简单的表格单行变色 本人也是一个正在学习的萌新，希望一起共同进步 首先要了解两个简单的事件属性 鼠标经过事件 onmouseover 鼠标离开事件 onmouseout 相当与css里面的:hover 选择器 其次建立一个表单 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <tit
jQuery 实现table隔行变色
super的博客
07-27 1546
使用jQuery 的集合处理能力简洁的实现table表格的隔行变色功能。
用JQuery实现表格隔行换颜色
热门推荐
suntanyong88的专栏
09-20 2万+
最近在学习Jquery，其实很多论坛中都有一个特点就是每张贴都是隔行换颜色的，相信这点大家可能发现。那么怎样实现这种功能呢。方法有3种：     方法一：使用CSS样式，定义两个类的样式，分别使用到表格中。这种方法想法简单，相信很多人都想到。但是这样做很麻烦，如果表格很多工作量
jquery针对单双行显示不同背景颜色
weixin_30470643的博客
07-10 791
//根据单双行显示不同背景色$('#table tr:even').css('backgroundColor','#E8E6E1');文中odd:单行，even:双行 转载于:https://www.cnblogs.com/TSPWater/archive/2010/08/25/1808271.html
jQuery实践2：隔行改变表格颜色
u010278162的博客
08-10 446
css修改表格样式
jquery表格隔行变色
最新发布
01-04
以下是两种实现jQuery表格隔行变色的方法： 1. 使用each()方法遍历表格行，并根据索引值判断是否为偶数行，然后使用css()方法设置背景颜色。 ```javascript $(document).ready(function() { var table = $("#...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值