<!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>jquery表格修饰：隔行换色,点击变色,多选单选变色</title>
</head>
<script language=javascript src="http://code.jquery.com/jquery-1.4.2.min.js"></script>
<style>
</style>
<SCRIPT LANGUAGE="JavaScript">
<!--
/*
jQuery实现点击复选框即高亮显示选中行 全选、反选
详见http://www.cnblogs.com/chengulv/archive/2012/02/25/2368055.html
*/
(function ($) {
$.fn.extend({
"alterBgColor": function (options) {
var prevselitem = null;
//设置默认值
options = $.extend({
// style: "0",
odd: "odd", /* 偶数行样式*/
even: "even", /* 奇数行样式*/
over: "over", /* 鼠标掠过*/
selected: "selected" /* 选中行样式*/
}, options);
//样式4
//其他列 为单选
$('tbody>tr td:not(:first-child)', this).click(function () {
var p = $(this).parents("tr");
p.addClass(options.selected).siblings().removeClass(options.selected).find(':checkbox:first').attr('checked', false);
p.find(':checkbox:first').attr('checked', true);
});
}
});
})(jQuery);
$(document).ready(function () {
$(':checkbox[name=tablechoice]').each(function(){
$(this).click(function(){
if($(this).attr('checked')){
$(':checkbox[name=tablechoice]').removeAttr('checked');
$(this).attr('checked','checked');
}
});
});
$("#listTable").alterBgColor(); //可以链式操作
});
//-->
</SCRIPT>
</head>
<body>
<h1>Demo2--隔行,滑动,点击 变色.+ 多选框选中的行 变色.</h1>
<table class="dataTable" id='listTable'>
<thead>
<tr>
<th></th>
<th>姓名</th>
<th>性别</th>
<th>暂住地</th>
</tr>
</thead>
<tbody>
<tr>
<td><input type="checkbox" name="tablechoice" value="" /></td>
<td>张山</td>
<td>男</td>
<td>浙江宁波</td>
</tr>
<tr>
<td><input type="checkbox" name="tablechoice" value="" /></td>
<td>李四</td>
<td>女</td>
<td>浙江杭州</td>
</tr>
<tr>
<td><input type="checkbox" name="tablechoice" value="" checked/></td>
<td>王五</td>
<td>男</td>
<td>湖南长沙</td>
</tr>
<tr>
<td><input type="checkbox" name="tablechoice" value="" /></td>
<td>找六</td>
<td>男</td>
<td>浙江温州</td>
</tr>
<tr>
<td><input type="checkbox" name="tablechoice" value="" /></td>
<td>Rain</td>
<td>男</td>
<td>浙江杭州</td>
</tr>
<tr>
<td><input type="checkbox" name="tablechoice" value="" /></td>
<td>MAXMAN</td>
<td>女</td>
<td>浙江杭州</td>
</tr>
</tbody>
</table>
</body>
</html>
分享到：
相关推荐
jQuery表格行全选反选单选代码，例子采用bootstrap格式，可以选择自定义。
首先，`jQuery表格行全选反选单选代码`的核心是实现表格中的复选框操作。当用户点击表格的行时，行内的复选框会被选中或取消选中，同时该行会呈现出高亮状态，以提供清晰的视觉反馈。这种功能在数据管理和筛选场景中...
BootstrapTable 是一个基于 jQuery 和 Bootstrap 框架的开源表格插件，它的出现极大地简化了在 Web 应用中创建功能丰富的数据展示表格的过程。这个插件提供了多种实用功能，如单选、多选、排序、分页、编辑、导出和...
jQuery表格是一种基于JavaScript库jQuery开发的，用于在网页上展示数据的组件。它以其美观的界面、丰富的功能和易于使用的API赢得了广泛的应用。jQuery库以其简洁的语法和强大的DOM操作能力，为创建复杂的用户界面...
**jQuery表格插件jqGrid详解** jqGrid是一款强大的基于JavaScript的开源网格控件，它能够为Web应用程序提供灵活、功能丰富的数据展示和操作界面。这款插件是jQuery库的一个扩展，专为处理大量数据和实现复杂的表格...
在这个"HTML测试表格单选按钮"的主题中，我们将深入探讨这两个元素的使用方法和实际应用。 首先，让我们来看看HTML表格。表格用于组织数据，通过行（tr）和列（td）的结构来展示信息。创建一个基本的HTML表格需要...
在描述中提到的"一个小例子"可能包含了一个简单的代码示例，例如使用HTML、CSS和JavaScript（可能是jQuery或其他库）来创建一个具有单选功能的表格。下面我们将详细讲解这一过程： 1. **HTML结构**： - 创建`...
这个"jQuery实现的表格行全选反选单选特效源码.zip"文件，显然提供了一种实现表格中行的全选、反选和单选效果的示例代码。下面我们将深入探讨jQuery在实现这种功能时涉及的关键知识点。 首先，jQuery的选择器是其...
EasyUI是一套基于jQuery的UI框架，它包含了多个可复用的UI组件，如表格、表单、窗口、菜单、对话框等。EasyUI的组件设计简洁，易于使用，大大简化了网页开发的工作。1.4.5是EasyUI的一个版本，该版本可能包含了一些...
《jQuery仿Excel表格排序筛选代码实现详解》 在网页开发中，模拟Excel表格的功能，如排序和筛选，能够极大地提高用户交互体验。本篇文章将详细解析"jQuery仿Excel表格排序筛选代码"，帮助开发者理解其背后的实现...
这个"jquery+json自动形成表格插件.zip"文件提供了一个实用的解决方案，帮助开发者快速创建动态表格，尤其适用于那些需要展示结构化数据的网页应用。下面将详细解释其中涉及的技术点。 首先，jQuery是一个强大的...
首先，jQuery Treeview是一个插件，它扩展了jQuery的功能，允许开发者将HTML表格或无序列表转换为具有折叠/展开功能的树状视图。这个插件提供了一种优雅的方式来组织和展示内容，用户可以通过点击节点来展开或折叠子...
总的来说，jQuery表格行全选反选单选特效是通过事件监听、状态管理及样式控制实现的，而`tableCheckbox.js`插件则提供了一种方便的方式来封装和扩展这些功能，使得开发者能够更专注于业务逻辑，而不是基础的DOM操作...
先给大家介绍下jQuery实现表格与ckeckbox的全选与单选功能。 先看看下面的效果： 用户点击头的checkbox时，所有表格数据行的checkbox全选或反选。 当数据行某一行没有选中时，头checkbox去选。当所有数据行的...
本教程将详细讲解如何使用jQuery来实现一个类似于淘宝商品详情页中的多规格SKU（库存保持单位）功能，帮助开发者自动生成表格表单，以便用户在选择商品时能方便地选取不同的属性组合。 首先，我们需要理解SKU的概念...
本文将探讨如何使用jQuery库来实现一个功能，即当用户点击表格行时，该行会高亮显示，并且行内的单选按钮会被选中。这种交互设计能够直观地反馈用户的选择，使得操作更为直观易懂。 首先，我们需要一个简单的HTML...
本文实例讲述了jQuery实现table表格checkbox全选的方法。分享给大家供大家参考，具体如下： 今天在页面中使用jQuery实现了全选框操作，如图： 具体的实现过程很简单： 第一步 设计一个简单的表格： 设置表格列标题...
除了基本的表格操作，jqGrid 还支持高级特性，如子网格、行内编辑、行选择模式（单选或多选）、自定义表头筛选、行拖放等。通过合适的配置和插件，可以满足各种复杂的数据展示和管理需求。 总的来说，jqGrid 是一个...
它们分别是《jQuery form操作技巧汇总》、《jQuery操作json数据技巧汇总》、《jQuery常用插件及用法总结》、《jQuery扩展技巧总结》、《jQuery表格(table)操作技巧汇总》以及《jquery选择器用法总结》。这些主题的...