<!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=utf-8" />
<title>无标题文档</title>
<style type="text/css">
table {
width:100%;
}
table, td {
border:1px solid #ccc;
border-collapse:collapse;
height:30px;
}
td {
width:20%;
}
</style>
<script src="jquery.js"></script>
<script>
$(function(){
//隔行改变背景色
$("tr:odd").css("background-color", "#e5e5e5");
//全选
$("#selAll").click(function(){
$(":checkbox").attr("checked", "checked");
});
//反选
$("#selRev").click(function(){
$(":checkbox").each(function(){
$(this).attr("checked", !$(this).attr("checked"));
});
});
//取消全选
$("#selCancel").click(function(){
$(":checkbox").attr("checked", "");
});
//选中当前行的checkbox
$("tr:odd").each(function(){
$(this).click(function(){
var e = $(this).children("td").children(":checkbox");
if(e[0].checked) {
e.attr("checked", "");
} else {
e.attr("checked", "checked");
}
});
$(this).hover(function(){
$(this).css("background-color", "#FFE1FF");
}, function(){
$(this).css("background-color", "#e5e5e5");
});
})
$("tr:even").each(function(){
$(this).click(function(){
var e = $(this).children("td").children(":checkbox");
if(e[0].checked) {
e.attr("checked", "");
} else {
e.attr("checked", "checked");
}
});
$(this).hover(function(){
$(this).css("background-color", "#FFE1FF");
}, function(){
$(this).css("background-color", "#fff");
});
})
$(":checkbox").click(function(){
$(this).attr("checked") ? $(this).attr("checked", false) : $(this).attr("checked", true);
});
})
</script>
</head>
<body>
<table>
<tr>
<td><input type="checkbox" /></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td><input type="checkbox" /></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td><input type="checkbox" /></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td><input type="checkbox" /></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td><input type="checkbox" /></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td><input type="checkbox" /></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td><input type="checkbox" /></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td><input type="checkbox" /></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
</table>
<p align="center">
<button id="selAll">全选</button>
<button id="selRev">反选</button>
<button id="selCancel">取消全选</button>
</p>
</body>
</html>
实用，转自：http://www.iteye.com/topic/1052803。
分享到：
相关推荐
本篇将详细探讨如何利用jQuery实现表格中checkbox的相关事件操作，包括动态添加行、隔行换色、选中变色、全选与反选等功能。 首先，让我们了解jQuery的基本概念。jQuery是一个快速、简洁的JavaScript库，它简化了...
在本教程中，我们将探讨如何使用jQuery实现一些常见的前端交互功能，包括表格数据的隔行变色、数据删除、全选删除以及图片预览。这些功能对于提升用户体验和交互性非常关键，尤其在数据展示和管理类的网页应用中。 ...
在网页开发中，全选框（check all box）是一个常见的功能，它允许用户一键选中或取消选中页面上的所有复选框。本教程将详细讲解如何使用jQuery来实现这样一个功能。 首先，我们需要一个HTML结构来展示数据。在这个...
1. 鼠标移动行变色：jQuery的`hover()`函数用于在鼠标进入和离开时执行不同的操作。例如，当鼠标悬停在表格行上时，可以通过添加`hover`类来改变行内单元格的颜色，反之则移除该类以恢复原色。 2. 奇偶行不同颜色：...
以上就是使用jQuery实现表格行选中变色及全选功能的基本步骤。在实际项目中，你可能需要根据具体需求进行调整，比如添加多选功能、实现分页表格等。如果你的项目中包含`jiaoben5173`文件，这可能是一个包含示例代码...
例如，遍历所有单元格以实现全选或取消全选的功能。 6. **范围选择**：仿Excel的另一个特性是连续选择多个单元格。这可能涉及到鼠标的拖动事件，以及根据鼠标起点和终点来确定选中范围的逻辑。 7. **数据存储**：...
看着书上的代码，自己敲了好一阵，发现自己优化后的代码比书上的更简洁，功能也更多，贴出来，留后用。 功能： 表格行点击变背景色、选择删除、全选删除、图片原图显示 效果显示： 代码贴上： <html> &...
在“Javascript表格高级操作”这个主题中，我们将深入探讨如何实现一系列高级功能，包括动态创建表格、跨浏览器兼容性、间隔色设定、鼠标悬停高亮、编辑与删除功能以及全选、全清和反选操作。这些功能都是为了提升...
这个"jQuery简单实例.zip"压缩包显然包含了几个使用jQuery实现的基本功能示例，这些功能对于网页交互性提升有着重要作用。下面将详细解释每个功能的实现原理和应用场景。 1. **表格奇偶行变色**： 表格是网页中...
在本文中，我们将探讨如何创建一个基于jQuery的表格插件，这个插件是受到easyUI的dataGrid的启发，具备动态加载JSON数据、自动分页、全选与反选、行悬停变色以及隔行变色等功能。下面将详细介绍这个过程。 首先，...
1. 鼠标移动行变色： 这个功能可以通过`.hover()`事件来实现。当鼠标悬停在表格行上时，给该行的单元格添加一个类，离开时移除这个类。两种方法的代码如描述所示，主要通过`addClass()`和`removeClass()`方法。 2....
实现全选和反选功能通常需要使用JavaScript或jQuery。 **配置示例：** ```xml (this.checked); return false;" /> ``` **JavaScript代码：** ```javascript function toggleCheckboxes(isChecked) { var ...