<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>表格</title>
<style>
* {
margin: 0;
padding: 0;
}
.sheet {
font-size: 13px;
border: 1px solid #ccc;
width: 90%;
margin: auto;
color: #676a6c;
}
.sheet thead tr {
background-color: #36a2e5;
height: 30px;
}
.sheet thead tr th {
color: #fff;
line-height: 30px;
}
.sheet tr td {
width: 5%;
text-align: center;
line-height: 30px;
}
.sheetForm tr:hover {
color: #fff;
}
</style>
</head>
<body>
<div style="margin: 20px;">
<table cellpadding="0" cellspacing="0" border="0" class="sheet">
<thead>
<tr>
<th>标题1</th>
<th>标题2</th>
<th>标题3</th>
<th>标题4</th>
<th>标题5</th>
<th>标题6</th>
<th>标题7</th>
<th>标题8</th>
<th>标题9</th>
<th>标题10</th>
<th>标题11</th>
<th>标题12</th>
<th>标题13</th>
</tr>
</thead>
<tbody class="sheetForm" id="sheetForm">
<tr>
<td>内容1</td>
<td>内容2</td>
<td>内容3</td>
<td>内容4</td>
<td>内容5</td>
<td>内容6</td>
<td>内容7</td>
<td>内容8</td>
<td>内容9</td>
<td>内容10</td>
<td>内容11</td>
<td>内容12</td>
<td>内容13</td>
</tr>
<tr>
<td>内容1</td>
<td>内容2</td>
<td>内容3</td>
<td>内容4</td>
<td>内容5</td>
<td>内容6</td>
<td>内容7</td>
<td>内容8</td>
<td>内容9</td>
<td>内容10</td>
<td>内容11</td>
<td>内容12</td>
<td>内容13</td>
</tr>
<tr>
<td>内容1</td>
<td>内容2</td>
<td>内容3</td>
<td>内容4</td>
<td>内容5</td>
<td>内容6</td>
<td>内容7</td>
<td>内容8</td>
<td>内容9</td>
<td>内容10</td>
<td>内容11</td>
<td>内容12</td>
<td>内容13</td>
</tr>
<tr>
<td>内容1</td>
<td>内容2</td>
<td>内容3</td>
<td>内容4</td>
<td>内容5</td>
<td>内容6</td>
<td>内容7</td>
<td>内容8</td>
<td>内容9</td>
<td>内容10</td>
<td>内容11</td>
<td>内容12</td>
<td>内容13</td>
</tr>
<tr>
<td>内容1</td>
<td>内容2</td>
<td>内容3</td>
<td>内容4</td>
<td>内容5</td>
<td>内容6</td>
<td>内容7</td>
<td>内容8</td>
<td>内容9</td>
<td>内容10</td>
<td>内容11</td>
<td>内容12</td>
<td>内容13</td>
</tr>
</table>
</body>
</div>
<script type="text/javascript" src="js/jquery.min.js?v=2.1.4"></script>
<script>
//1.设置奇数行tr标签的背景色
$('.sheetForm tr:odd').css('backgroundColor', '#fff');
//2.设置偶数行tr标签的背景色
$('.sheetForm tr:even').css('backgroundColor', '#f5f5f5');
//3. 鼠标移入事件
var bgColor = null; //先声明一个变量把颜色存起来
$('.sheetForm tr').mouseover(function() {
// 3.1在鼠标移入到这个tr标签时,没有改变颜色之前,把他之前的颜色给记录下来.
bgColor = $(this).css('backgroundColor');
$(this).css('backgroundColor', '#4dd3fa')
})
//4. 鼠标移出事件
$('.sheetForm tr').mouseout(function() {
$(this).css('backgroundColor', bgColor)
})
</script>
</html>
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
