jquery table 隔行变色+点谁谁变色
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title></title>
<meta charset="utf-8" />
<script src="jquery-3.3.1.js"></script>
<script>
$(function () {
$('#btn').click(function () {
$('#tb tr:first').css('fontSize', '30px');//第一行
$('#tb tr:last').css('color', 'red');//最后一行
$('#tb tr:gt(0):lt(3)').css('fontSize', '28px');//正文前三行
$('#tb tr:odd').css('backgroundColor', 'red');//偶数行
});
$('#tb tr').click(function () {
$(this).css('backgroundColor', 'yellow').siblings('tr').css('backgroundColor','');//点谁谁变黄色
});
});
</script>
</head>
<body>
<input type="button" name="name" value="显示效果" id="btn" />
<table border="1" id="tb" style="cursor:pointer">
<tr>
<td>姓名</td>
<td>年龄</td>
</tr>
<tr>
<td>张三</td>
<td>30</td>
</tr>
<tr>
<td>李四</td>
<td>50</td>
</tr>
<tr>
<td>王五</td>
<td>48</td>
</tr>
<tr>
<td>陈六</td>
<td>17</td>
</tr>
<tr>
<td>赵七</td>
<td>56</td>
</tr>
<tr>
<td>张八</td>
<td>98</td>
</tr>
<tr>
<td>吕九</td>
<td>20</td>
</tr>
<tr>
<td>汇总</td>
<td>600</td>
</tr>
</table>
</body>
</html>
jquery table 隔行变色+点谁谁变色的更多相关文章
- JQuery实现隔行变色和突出显示当前行 效果
运行效果如下图: jquery关键代码: <script type="text/javascript"> //该文件为:js.js // 当鼠标移到表格上是,当前一行背 ...
- 简单的css js控制table隔行变色
(1)用expression 鼠标滑过变色: <style type="text/css"><!-- table { background-color:#0000 ...
- 隔行变色---简单的css js控制table隔行变色
(1)用expression 鼠标滑过变色: <style type="text/css"><!-- table { background-color:#0000 ...
- jQuery的基本过滤器与jQuery实现隔行换色实例
没加过滤器之前: 加过滤器之后: 总的代码: <!DOCTYPE html> <html> <head> <meta charset="UTF-8& ...
- jQuery table td可编辑
参考链接: http://www.freejs.net/ http://www.freejs.net/article_biaodan_34.html http://www.freejs.net/sea ...
- jquery.Table实现的翻页功能比较完整漂亮，本想扩展个模版DIV
jquery.dataTable实现的翻页功能比较完整漂亮,本想提取其的翻页部分,再结合模版DIV,bootstrop实现聊天记息的展示. jquery.Table 与table结合的较紧,不能在很下 ...
- jQuery实现table隔行换色和鼠标经过变色
一.隔行换色 $("tr:odd").css("background-color","#eeeeee"); $("tr:even& ...
- jquery table的隔行变色 鼠标事件
一.鼠标事件 mouseover(function(){}); 鼠标移动到目标事件 mouseout(function(){}); 鼠标离开目标的事件 二.具体应用代码 <body> &l ...
- jquery学习笔记(4)--实现table隔行变色以及单选框选中
<html xmlns="http://www.w3.org/1999/xhtml"> <head runat="server"> &l ...
随机推荐
- GoJS超详细入门（插件使用无非：引包、初始化、配参数（json）、引数据（json）四步）
GoJS超详细入门(插件使用无非:引包.初始化.配参数(json).引数据(json)四步) 一.总结 一句话总结:插件使用无非:引包.初始化.配参数(json).引数据(json)四步. 1.goj ...
- PatentTips - Method and system for browsing things of internet of things on ip using web platform
BACKGROUND The following disclosure relates to a method and system for enabling a user to browse phy ...
- 安装innotop
安装方法一: 下载地址:https://github.com/innotop/innotop yum install -y perl-TermReadKey yum install -y perl-D ...
- centos / Linux 服务环境下安装 Redis 5.0.3
原文:centos / Linux 服务环境下安装 Redis 5.0.3 1.首先进入你要安装的目录 cd /usr/local 2.下载目前最新稳定版本 Redis 5.0.3 wget http ...
- 【poj1442】Black Box
Time Limit: 1000MS Memory Limit: 10000K Total Submissions: 10890 Accepted: 4446 Description Our ...
- DOM中Event 对象如何使用
DOM中Event 对象如何使用 一.总结 一句话总结: 1.将event作为参数传递进来,然后就可以调用event对象的各种属性和方法了. <body onmousedown="wh ...
- 算法 Tricks（四）—— 获取一个数二进制形式第一个不为 0 的位置
int n = ...; int flag = 1; while ((flag & n) == 0) flag <<= 1; // & 运算时,其实判断的是二者的二进制形式 ...
- Ubuntu安装编译OpenCV一键脚本（带ffmpeg）
1.切换到用户文件夹 cd ~ 2.新建一个文件.命名为opencv.sh 脚本例如以下: version="$(wget -q -O - http://sourceforge.net/pr ...
- DotNetty编写跨平台网络通信
DotNetty编写跨平台网络通信 长久以来,.Net开发人员都非常羡慕Java有Netty这样,高效,稳定又易用的网络通信基础框架.终于微软的Azure团队,使用C#实现的Netty的版本发布.不但 ...
- 学习鸟哥的Linux私房菜笔记（6）——过滤器、输入输出及管道
一.过滤器 Linux中的应用工具分为三种: 交互工具 过滤器 编辑器 能够接受数据,过滤再输出的工具,称之为过滤器 对过滤器和进程,存在着输入源与输出对象 二.输入.输出.重定向 输入:过滤器的数据 ...