jquery实现表格中点击相应行变色功能效果【实例代码】
对于一个表格,为了使我们选中的项更容易区分,需要为选中项添加高亮,同时也需要,将其他项的高亮形式去除。类似于:
<!DOCTYPE html> <html lang="en" xmlns="http://www.w3.org/1999/xhtml"> <head> <meta charset="utf-8" /> <title></title> <link href="css/style.css" rel="stylesheet" type="text/css" /> <script src="jquery-1.3.2.min.js"></script> <script> $(function () { $('tbody>tr').click(function () { $(this).addClass('selected') //为选中项添加高亮 .siblings().removeClass('selected')//去除其他项的高亮形式 .end(); }); }); </script> </head> <body> <table> <thead> <tr><th>姓名</th><th>性别</th><th>暂住地</th></tr> </thead> <tbody> <tr><td>张三</td><td>男</td><td>浙江宁波</td></tr> <tr><td>张三</td><td>男</td><td>浙江宁波</td></tr> <tr><td>张三</td><td>男</td><td>浙江宁波</td></tr> <tr><td>张三</td><td>男</td><td>浙江宁波</td></tr> <tr><td>张三</td><td>男</td><td>浙江宁波</td></tr> </tbody> </table> </body> </html>
以上这篇jquery实现表格中点击相应行变色功能效果【实例代码】就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持我们。
相关推荐
-
jQuery实现动态生成表格并为行绑定单击变色动作的方法
本文实例讲述了jQuery实现动态生成表格并为行绑定单击变色动作的方法.分享给大家供大家参考,具体如下: <html> <head> <meta charset="utf-8"> <title>jquery表格单击变色</title> <script type="text/javascript" src="jquery-1.7.2.min.js"></script>
-
jQuery代码实现表格中点击相应行变色功能
对于一个表格,为了使我们选中的项更容易区分,需要为选中项添加高亮,同时也需要,将其他项的高亮形式去除.类似于: <!DOCTYPE html> <html lang="en" xmlns="http://www.w3.org/1999/xhtml"> <head> <meta charset="utf-8" /> <title></title> <link href=&
-
jQuery轻松实现表格的隔行变色和点击行变色的实例代码
jQuery轻松实现表格的隔行变色和点击行变色的实例代码 <!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> <m
-
JQuery 动态生成Table表格实例代码
JQuery动态生成Table表格 主要用到了JQuery中的append和appendto的方法,具体代码如下: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <meta http-equiv="Content-Type&quo
-
用JQuery实现表格隔行变色和突出显示当前行的代码
复制代码 代码如下: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"> &l
-
Jquery 动态生成表格示例代码
复制代码 代码如下: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312"
-
jQuery动态生成不规则表格(前后端)
一.需求:有这么一张表 前四个属性当作联合主键 需要把该表所有的行在前端以表格形式显示出来,要求activityId相同时合并成一行,activityCode相同时,合并一行,activityVersion相同时也合并一行.类似这种: 二.初解决:先上来把数据库的数据查询出来,以List<Activity> activities保存,再存到json对象中传回页面.像这样json.put("activities",activities); 到js页面了,然后就开始蒙蔽了.本来
-
jQuery动态生成表格及右键菜单功能示例
本文实例讲述了jQuery动态生成表格及右键菜单功能.分享给大家供大家参考,具体如下: 这里用的是 jquery 1.4.1 的库文件,具体代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www
-
jQuery实现表格隔行及滑动,点击时变色的方法【测试可用】
本文实例讲述了jQuery实现表格隔行及滑动,点击时变色的方法.分享给大家供大家参考,具体如下: 运行效果截图如下: 具体代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml&qu
-
jQuery实现多按钮单击变色
这个小特效代码很简单,就不多做说明了,直接奉上源码. JQuery代码: 复制代码 代码如下: <script type="text/javascript"> //加载事件 $(function () { var collection = $(".flag"); $.each(collection, function () { $(this).
-
JQuery Ajax动态生成Table表格
前言: 本示例大概功能是前台通过JQuery的Ajax调用一般处理程序(Handler),获取表格需要显示的信息,然后转换成json格式返回给前台,前台获取到数据后循环构建表格的行,最好把行附加到表里. 目标: a 熟悉简单JQuery Ajax的使用 b 了解如何构造基本的Json格式的数据(构建Json也可以通过第三方的dll) c 熟悉下handler的基本用法 1 简单效果图 2 前台代码 <%@ Page Language="C#" AutoEventWireup=&q
-
jQuery动态生成Bootstrap表格
效果图如下所示: <%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%> <% String path = request.getContextPath(); String basePath = request.getScheme()+"://"+request.getServerName()+":"+req
-
jQuery插件实现表格隔行变色及鼠标滑过高亮显示效果代码
本文实例讲述了jQuery插件实现表格隔行变色及鼠标滑过高亮显示效果的方法.分享给大家供大家参考,具体如下: 此插件旨在实现表格隔行变色,且鼠标移动在表格的某一行上时,该行能高亮显示.整体代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <htm
随机推荐
- VC++操作SQLite简单实例
- MySQL学习笔记之数据定义表约束,分页方法总结
- PHP使用Nginx实现反向代理
- Visual Studio 2017+OpenCV环境搭建教程
- 用js实现的比较经典实用的触发型导航菜单
- Spring学习笔记3之消息队列(rabbitmq)发送邮件功能
- PHP操作数组的一些函数整理介绍
- asp 实现的冒泡排序程序
- asp.net HttpHandler实现图片防盗链
- 在JS数组特定索引处指定位置插入元素
- VS2015 Update2 构建 Android 程序问题汇总
- AJAX分页的代码(后台asp.net)
- jQuery实现动态添加tr到table的方法
- DOM基础教程之使用DOM
- JavaScript中全局变量、函数内变量以及常量表达式的效率测试
- linux入门教程 第2章 安装指南
- MyBatis中#号与美元符号的区别
- Android自定义ViewPagerIndicator实现炫酷导航栏指示器(ViewPager+Fragment)
- Android 中RecycleView实现item的点击事件
- 脚本控制三行三列自适应高度DIV布局