<script src="jquery-1.9.1.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function(){
$(".strip tr").mousemove(function(){$(this).addClass("over");}).mouseout(function(){$(this).removeClass("over")})
$(".strip tr:even").addClass("alt");
});
</script>
<style type="text/css">
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:#ecf6fc}
tr.over td{background:#bcd4ec}
</style>
</head>
<body>
<table class="strip" width="50%" border="0" cellpadding="0" cellspacing="0">
<thead>
<tr>
<th>姓名</th>
<th>年龄</th>
<th>QQ</th>
<th>Email</th>
</tr>
</thead>
<tbody>
<tr>
<td>嘻嘻</td>
<td>25</td>
<td>34234</td>
<td>test@sina.com</td>
</tr>
<tr>
<td>嘻嘻</td>
<td>25</td>
<td>34234</td>
<td>test@sina.com</td>
</tr>
<tr>
<td>嘻嘻</td>
<td>25</td>
<td>34234</td>
<td>test@sina.com</td>
</tr><tr>
<td>嘻嘻</td>
<td>25</td>
<td>34234</td>
<td>test@sina.com</td>
</tr><tr>
<td>嘻嘻</td>
<td>25</td>
<td>34234</td>
<td>test@sina.com</td>
</tr>
</tbody>
</table>
</body>
</html>
分享到：
相关推荐
本文将深入探讨“jquery入门之双色表格”，教你如何利用jQuery实现一个鼠标悬停时背景颜色变化的双色表格效果。 首先，我们需要理解HTML结构。在`sstable.html`文件中，通常会包含一个表格元素`<table>`，里面包含...
7. 快速制作双色表格：文中提到了如何使用jQuery来制作双色表格，这展示了jQuery在操作DOM方面的便捷性。尽管这部分内容没有详细展开，但我们可以得知，通过少量的jQuery代码即可实现复杂的页面效果。 8. jQuery的...
jQuery使得制作双色表格变得极其简单。在传统方法中，这可能需要大量的CSS或JavaScript代码。而在jQuery中，只需几行代码，就能轻松实现表格行交替颜色的效果，增强了用户体验。 6. **jQuery的适用场景**： ...
**双色表格实现**：使用jQuery制作双色表格也变得异常简单，仅需几行代码即可完成。通过选择器和循环逻辑，可以轻松地为表格的每一行交替添加不同的背景颜色，从而提升用户体验和视觉吸引力。 #### 八、结语：为何...
#### 五、实战案例：使用jQuery制作双色表格 在本书的第三章中，作者通过一个实例展示了如何使用jQuery轻松创建双色表格。这一案例不仅展示了jQuery的DOM操作能力，还突出了其在减少代码量方面的优势。具体步骤如下...
文档中提到了如何使用jQuery来快速制作双色表格的示例，展示出了jQuery在实际应用中的便捷性。与传统的DOM操作相比，使用jQuery进行DOM操作更加直观、简洁，并且易于实现复杂的交互效果。 此外，文档还提到了jQuery...
**使用jQuery制作双色表格：** jQuery使得操作DOM变得异常简单。下面是一个使用jQuery为表格添加交替颜色的简单示例： **示例代码：** ```html <!DOCTYPE html> <title>jQuery Table Example .even { ...
在示例代码中，作者展示了一个用jQuery轻松创建双色表格的实例。传统方法可能需要较多的代码和复杂的步骤，而jQuery利用其简洁的语法和强大的选择器，使得任务变得非常简单。这个例子很好地说明了jQuery如何通过最少...
2. **制作双色表格** - **需求**：创建一个双色交替的表格，以提高可读性。 - **实现方式**：利用jQuery的链式调用特性，结合`:even`和`:odd`选择器来分别设置奇数行和偶数行的样式。 ```javascript $("table ...
##### 5.2 双色表格制作 - **目的**：通过简单的代码实现交替颜色的表格行，提升用户体验。 - **实现步骤**： 1. 引入jQuery库文件。 2. 使用CSS设置基础样式。 3. 编写jQuery代码，通过`index()`方法判断行号，...
#### Day 2: 很容易的制作双色表格 在网页设计中，双色表格可以提高可读性和美观度。使用jQuery，只需几行代码即可轻松实现这一效果： ```javascript $('table tr:even').addClass('even'); $('table tr:odd')....