<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<TITLE> New Document </TITLE>
<META NAME="Generator" CONTENT="EditPlus">
<META NAME="Author" CONTENT="">
<META NAME="Keywords" CONTENT="">
<META NAME="Description" CONTENT="">
<style>
table {
border: red solid 1px;
border-right: none;
border-bottom: none;
}
table td {
border-right: red solid 1px;
border-bottom: red solid 1px;
text-align: center;
}
table th {
border-right: red solid 1px;
border-bottom: red solid 1px;
}
/* 鼠标经过的背景色 */
.tr_bg { background-color: blue; }
/* 选中背景色 */
.tr_click_bg { background-color: gray; }
</style>
<script src="../plugs/jquery-1.7.1.js"></script>
<script>
$(function() {
$("#tab").find("tr").hover(function() {
$(this).addClass("tr_bg"); // 添加背景色
}, function() {
$(this).removeClass("tr_bg"); // 去除背景色
});
$("#tab").find("tr").click(function() {
$("#tab").find("tr").removeClass("tr_click_bg"); // 清除所有背景色
$(this).addClass("tr_click_bg"); // 给选中添加背景色
})
})
</script>
</HEAD>
<BODY>
<table width="500" cellspacing="0" cellpadding="0" id="tab">
<tr>
<th>tou</th>
<th>tou</th>
<th>tou</th>
<th>tou</th>
</tr>
<tr>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
</tr>
<tr>
<td>2</td>
<td>2</td>
<td>2</td>
<td>2</td>
</tr>
<tr>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
</tr>
<tr>
<td>4</td>
<td>4</td>
<td>4</td>
<td>4</td>
</tr>
<tr>
<td>5</td>
<td>5</td>
<td>5</td>
<td>5</td>
</tr>
</table>
</BODY>
</HTML>
分享到：
相关推荐
jquery表格变色jquery表格变色jquery表格变色jquery表格变色jquery表格变色jquery表格变色jquery表格变色jquery表格变色jquery表格变色jquery表格变色jquery表格变色jquery表格变色
本主题涉及的是使用jQuery实现的一种常见的用户界面优化技巧——"表格隔行变色"以及"鼠标滑过时竖直表格内容变色效果"。这种效果可以提升表格的可读性，使得数据更加清晰易辨。 首先，我们来讨论“表格隔行变色”。...
本主题聚焦于“jQuery table选中表格行变色”这一功能，它在交互式网页设计中尤为常见，可以提升用户体验。下面将详细介绍如何使用jQuery实现这个功能。 首先，我们需要一个基本的HTML表格结构，例如： ```html ...
总的来说，这个"jQuery Table点击选中表格行变色代码"是一个基础的用户交互示例，展示了如何结合jQuery的事件处理和CSS样式来增强用户体验。在实际项目中，开发者需要根据具体需求进行扩展和优化，例如增加数据驱动...
本资源“jQuery Table选中表格行变色代码.zip”提供了一个实用的功能，即当用户点击表格中的某一行时，该行会变色，以突出显示用户的选择。这个功能在数据展示和交互性较强的网页中十分常见，例如在数据分析、电商...
本示例中的"jQuery Table点击选中表格行变色代码"是关于如何利用jQuery来实现一个交互式表格的功能，当用户点击表格的某一行时，该行会高亮显示，提供更好的用户体验。 首先，`index.html`文件是网页的主结构文件，...
在“jquery 框选变色”这个主题中，我们将探讨如何利用jQuery实现对HTML表格（table）中的选定单元格（td）进行颜色变化的功能。 首先，我们需要理解HTML表格的基本结构。一个表格由`<table>`元素定义，内部包含行`...
标题中的“jQuery鼠标移动表格变色及修改单元格值”是指使用jQuery库来实现一个功能，当鼠标在HTML表格上移动时，所经过的单元格会改变颜色，并且用户能够编辑表格中的单元格值。这个功能结合了jQuery的选择器、事件...
总之，"jQuery 鼠标移动到表格变色特效"是一个利用jQuery处理鼠标事件并改变元素样式的实例，通过学习这个例子，开发者可以掌握jQuery的基本用法，了解如何结合CSS实现交互效果，这对于创建动态、响应式的网页界面至...
总结来看，通过结合文档中提供的代码和解释，我们可以了解到如何使用jQuery来增加表格的动态交互功能，如悬停变色、点击变色及点击行选中复选框等。这些功能提升了用户界面的友好性，使得表格数据的展示和操作更加...
对于"隔行变色"，我们可以利用jQuery选择器来选取商品列表中的每一行，并通过CSS样式来改变颜色。 1. **HTML 结构** 商品列表通常以表格（`<table>`）或无序列表（`<ul>`）的形式呈现，每个商品作为一个单元格（`...
以上就是使用jQuery实现表格行选中变色及全选功能的基本步骤。在实际项目中，你可能需要根据具体需求进行调整，比如添加多选功能、实现分页表格等。如果你的项目中包含`jiaoben5173`文件，这可能是一个包含示例代码...
在本案例中，"网页里面表格隔行变色代码" 描述了一种实现表格隔行变色的方法，包括奇偶数行的变色以及点击变色的效果。 首先，我们来了解如何实现基础的表格隔行变色。在HTML中，`<table>`元素用于创建表格，`<tr>`...
本教程将详细讲解如何使用jQuery实现一个仿Excel表格的选中变色效果，以增强用户界面的交互性。 首先，我们需要理解jQuery的基本用法。jQuery的核心在于它的选择器，它允许我们高效地选取DOM元素。例如，`$("#...