很容易的制作双色表格

最新推荐文章于 2021-08-02 16:22:16 发布
最新推荐文章于 2021-08-02 16:22:16 发布
阅读量540 收藏
点赞数
分类专栏： Jquery 云原生

<!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 type="text/javascript" src="js/jquery-1.3.2.min.js"></script>

<script type="text/javascript">
$(function(){
$(".stripe tr").mouseover(function(){

$(this).addClass("over");}).mouseout(function(){

$(this).removeClass("over");})
$(".stripe tr:even").addClass("alt");

});
</script>
<style>
th {
background:#0066FF;
color:#FFFFFF;
line-height:20px;
height:30px;
}
td {
padding:6px 11px;
border-bottom:1px solid #95bce2;
vertical-align:top;
text-align:center;
}
td * {
padding:6px 11px;
}

tr.alt td {
background:#00FF00; /*这行将给所有的tr 加上背景色*/
}
tr.over td {
background:#FF0000; /*这个将是鼠标高亮行的背景色*/
}
</style>
</head>
<body>
<table class="stripe" width="50%" border="0" cellspacing="0"
cellpadding="0">
<!--用class="stripe"来标识需要使用该效果的表格-->
<thead>
<tr>
<th>姓名</th>
<th>年龄</th>
<th>QQ</th>
<th>Email</th>
</tr>
</thead>
<tbody>
<tr>
<td>邓国梁</td>
<td>23</td>
<td>31540205</td>
<td>gl.deng@gmail.com</td>
</tr>
<tr>
<td>邓国梁</td>
<td>23</td>
<td>31540205</td>
<td>gl.deng@gmail.com</td>
</tr>
<tr>
<td>邓国梁</td>
<td>23</td>
<td>31540205</td>
<td>gl.deng@gmail.com</td>
</tr>
<tr>
<td>邓国梁</td>
<td>23</td>
<td>31540205</td>
<td>gl.deng@gmail.com</td>
</tr>
<tr>
<td>邓国梁</td>
<td>23</td>
<td>31540205</td>
<td>gl.deng@gmail.com</td>
</tr>
<tr>
<td>邓国梁</td>
<td>23</td>
<td>31540205</td>
<td>gl.deng@gmail.com</td>
</tr>
</tbody>
</table>
<p>PS: 飘飘说我的table 没有<thead>,我知错了...</p>
</body>
</html>

forBurnInG
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
jquery入门之双色表格
08-17
双色表格，鼠标放上去北京会变化
双色相间表格(绝)
10-06 1925
.DoubleColorTable tr{ background-color:expression("#FFFFFF,#EEEEEE".split(",")[rowIndex%2])}                                                      
Jquery快速制作双色表格
Developer
03-27 157
&lt;script src="jquery-1.9.1.js" type="text/javascript"&gt;&lt;/script&gt; &lt;script type="text/javascript"&gt; $(document).ready(function(){ $(".strip tr").mousemove(function(){$(this).
JS实现双色表格
weixin_30349597的博客
11-23 429
通过为<tr>元素添加属性或类型选择器，再通过CSS设置可以实现双色表格，但如果表格很长，逐个元素添加可真麻烦。而且这样的代码维护起来不容易。所以比较好的方式是用JS实现。 原理其实很简单：利用getElementsByTagName得到所有的<tr>元素，然后分别为奇数项和偶数项的<tr>元素添加背景颜色。 核...
jQuery双色表格
wg243964183的专栏
03-16 854
http://www.w3.org/TR/xhtml1/DTD/xhtml http://www.w3.org/1999/xhtml"> StripingTable $(document).ready(function(){ //这个就是传说的ready $(".stripe tr").mouseover(function(){ //如果鼠标移到class为strip
制作双色表格.html
09-30
制作双色表格 学习新的技术和方法 制作双色表格 学习新的技术和方法
jquery 双色表格实现代码
10-29
上次用javascript实现了上色表格,见。但通过jQuery强大的选择器可更加简洁，优雅的实现。
使用jQuery5分钟快速搞定双色表格的简单实例
12-02
这个双色表格看上去应该觉得挺专业的，不过它用jQuery实现的确很简单。 第一步：写好css。 <style type="text/css"> th { /*表头样式*/ background:#0066FF; color:#FFFFFF; line-height:20px; height:30...
JS 实现双色表格实现代码
10-29
通过为元素添加属性或类型选择器，再通过CSS设置可以实现双色表格，但如果表格很长，逐个元素添加可真麻烦。而且这样的代码维护起来不容易。所以比较好的方式是用JS实现。
双色表格（含页面内容查找功能）（JavaScript）
weixin_48112113的博客
08-02 1145
1. 任务要求 1）简单过滤器的使用； 2）内容过滤器的使用； 3）如何获取指定元素的值？ 4）如何设置元素的样式？ 2. 需求说明 制作显示如下图所示的页面，要求如下。 （1）当页面加载完毕时，隔行变色，颜色值如上图所示，其中标题行字体颜色为白色，首行背景颜色值为：#00a40c，偶数行颜色值为#a5e5aa。 （2）当鼠标指向某一行时，该行颜色随之改变，当离开那行时，该行颜色恢复原样。 （3）输入相应的查找内容，点击...
一段自动给表格增加双色显示的JS（带思路说明）
11-27 110
主要思路: 1.页面加载结束后获取当前页面所有的表格。 2.遍历表格的所有行。 3.修改行的样式，奇数行是'odd' 样式，偶数行是'even'样式。 4.给每一行增加onmouseover 事件，事件发生时改变当前行的样式。 function add_event(tr){ tr.onmouseover = function(){ tr.className += 'h...
JQuery制作双色表格
风华正茂
07-13 843
<br />  //JQUERY制作双色表格<br />    $(document).ready(function(){<br />          //$(".stripe_tb tr"):获得class属性为stripe_tb的表格后再获取属于表格的行<br />          $(".stripe_tb tr").mouseover(function(){    //为表格的行添加mouseover事件<br />              //如果鼠标移到class为stripe_tb的表格
双色球excel表格图表
cdljx255的专栏
10-18 3160
我一直想做一EXCEL表格的双色球统计图、表，包自动更新功能，不知是否有下载或有高手指点怎么做？ 
jQuery双色表格的实现
weixin_30678821的博客
12-29 113
<!DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <htmlxmlns="http://www.w3.org/1999/xhtml"> <head...
使用jQuery5分钟快速搞定双色表格
Java高知社区
10-27 4614
先看看这个使用jQuery做的双色表格的效果： 这个双色表格看上去应该觉得挺专业的，不过它用jQuery实现的确很简单。 第一步：写好css。 th { /*表头样式*/ background:#0066FF; color:#FFFFFF; line-height:20px; heigh
web前端基础：用jQuery制作双色表格代码分享
molihuaya的博客
01-27 538
我将代码帖出来然后对重点部分注释一下：我们先来看看Thewatchmakerproject传统的做法：预览地址(你可以查看一下源代码)。再来看看jQuery是如何用5行代码来搞定的:   DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1
JQ实现双色表格
weixin_30321449的博客
12-07 349
上次用javascript实现了上色表格,见<JS实现双色表格>。但通过jQuery强大的 选择器可更加简洁，优雅的实现。 不多说了，直接给代码 代码 <html><head><title>双色表格</title><styletype="text/css...
JQuery双色表格制作
Note
10-02 208
&lt;!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"&gt; &lt;html xmlns="http://www.w3.org/1999/xhtml"&gt; &lt;head&gt; &lt
在使用jQuery+HTML+Javascript的简单例子---很容易的制作双色表格
cq_jone的专栏
07-24 911
源码说明： 1) example.html为集合了jQuery,Javascript,HTML,CSS的源码。 2) jquery-1.3.1.js 为jQuery最新发布的库文件，当然这是使用jQuery的前提哦. 你可以去官网下载版本库，URL：http://docs.jquery.com/Downloading_jQuery#Current_Release 点击exa
proteus双色点阵
最新发布
12-09
其中的模拟设计工具中包括了支持双色点阵的功能。 双色点阵是由许多能够发光的二极管 (LED) 组成的矩阵，可以显示出不同的图案和文字。通常，这些点阵以8x8或16x16的形式排列，每个点阵都由若干个LED组成。在...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值