JQuery实现表格隔行变色，鼠标经过的行放大显示

最新推荐文章于 2021-06-03 17:14:15 发布

hikevin17

最新推荐文章于 2021-06-03 17:14:15 发布

阅读量925

点赞数

文章标签： jquery function border javascript table 文档

本文链接：https://blog.csdn.net/hikevin17/article/details/6507035

版权

JQuery以其简洁实用的特点深受开发人员的喜爱，呵呵，我也是才刚刚开始学习的，一来就体会到了这迷人的优势。下面就将自己在课堂上所学和一些新的思想写出来，大家共勉。

JQuery还是适合前台（客户端）开发一些，对于网页设计师也是很容易就能掌握的，因为不用自己去写那一行行艰涩的javascript代码，同时也能屏蔽不同浏览器的差异，就光是这一点就超赞了。

进入主题，现在来写今天要实现的效果。为了体现标准化和结构化的设计思路，我们在根目录下建立Css和Jscript两个文件，分别用来存放样式方式文档和行为文档。在Css文件夹下新建一个Site.css的样式表文件，在JScript新建一个JScript.js的行为文件，很重要的是，我们需要将一个JQuery的一个代码库复制到该文件夹下，该代码库可以其官网下载。我使用的是jquery126.js（126是其一个版本号）。在根目录下我们新建一个Default.html网页文件，将样式文件和行为文件与Default.html进行关联：

Code:

<link rel="stylesheet" type="text/css" href="Css/Site.css" />
<script language="javascript" type="text/javascript" src="JScript/jquery126.js"></script>
<script language="javascript" type="text/javascript" src="JScript/JScript.js"></script>

在<body></body>写一个表格：

Code:

<table>
<tr id="th1"><th>学号</th><th>姓名</th></tr>
<tr><td>08101</td><td>张三</td></tr>
<tr><td>08102</td><td>李四</td></tr>
<tr><td>08103</td><td>王五</td></tr>
<tr><td>08104</td><td>赵六</td></tr>
<tr><td>08105</td><td>东东</td></tr>
<tr><td>08106</td><td>西西</td></tr>
</table>

下面是样式表文件：

Code:

body {
}
table
{
border:solid 1px blue;
border-collapse:collapse; /*合并重复的表格边框，达到一个像素的目的*/
}
td
{
border:solid 1px blue;
border-collapse:collapse; /*合并重复的单元格边框，达到一个像素的目的*/
}
.bg1
{
background-color:Red; /*基数行背景样式*/
}
.bg11
{
font-size:30px; /*放大字号*/
}
.bg2
{
background-color: Gray; /*偶数行背景样式*/
}
.bg22
{
font-size:30px; /*放大字号*/
}
#th1
{
font-size:30px;
}

准备得差不多了，来写我们的JQuery代码，该代码是写在jscript.js里的哦，如下：

Code:

// JScript 文件
//通过 ready方法使网页在加载成功时就能执行代码。
$(document).ready(function (){
$("tr:odd").bind("mouseover",function (){$(this).addClass("bg1");$(this).addClass("bg11")}).bind("mouseout",function (){$(this).removeClass();});
$("tr:even").bind("mouseover",function (){$(this).addClass("bg2");$(this).addClass("bg22")}).bind("mouseout",function (){$(this).removeClass();});
});
//分别获得表格的基数行和偶数行，并为它们绑定"mouseover"和"mouseout"事件，鼠标移动到表格行显示对应的样式，移开后去除样式