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 ...
随机推荐
- 为什么位运算可以实现加法（1、 不考虑进位的情况下位运算符中的异或^可以表示+号）（2、 位运算符中的与运算符&和左移运算符<<可以模拟加法中的进位）（3、位运算不仅可以做加法，还可以做其它的乘法减法等：计算机本质是二进制运算）
为什么位运算可以实现加法(1. 不考虑进位的情况下位运算符中的异或^可以表示+号)(2. 位运算符中的与运算符&和左移运算符<<可以模拟加法中的进位)(3.位运算不仅可以做加法,还 ...
- DI：依赖注入详解
DI(依赖注入) 依赖注入的理解: 一般写程序的时候service层都需要用到dao层,所以一般都是在service层里面new dao ,而现在利用依赖注入的方式,直接把dao给了service层 ...
- 《iOS Human Interface Guidelines》——Edit Menu
编辑菜单 用户能够显示一个编辑菜单来在文本视图.网页视图和图像视图运行诸如剪切.粘贴和选择的操作. 你能够调整一些菜单的行为来在你的app中给用户给多的内容控制.比方你能够: 指定哪一个标准菜单命令对 ...
- [Java开发之路]（15）注解
1. 简单介绍 注解(也被称为元数据),为我们在代码中加入信息提供了一种形式化的方法. 注解在一定程度上是把元数据与源码文件结合在一起,而不是保存在外部文档中这一大趋势之下所催生的. 它能够提供用来完 ...
- 用JavaScript和CSS实现“在页面中水平和垂直居中”的时钟
思路:实现起来最麻烦的事实上是水平居中和垂直居中,当中垂直居中是最麻烦的. 考虑到浏览器兼容性,网上看了一些资料,发如今页面中垂直居中确实没有什么太好的办法. 于是就採用了position:fixed ...
- php实现数组中的逆序对（归并排序实现：排序 辅助数组）
php实现数组中的逆序对(归并排序实现:排序 辅助数组) 一.总结 这题用归并排序 线段树 树状数组 等操作的复杂度应该都是小于n方的 二.php实现数组中的逆序对 题目描述 在数组中的两个数字 ...
- SSL/TLS协议运行机制的概述（转）
互联网的通信安全,建立在SSL/TLS协议之上. 本文简要介绍SSL/TLS协议的运行机制.文章的重点是设计思想和运行过程,不涉及具体的实现细节.如果想了解这方面的内容,请参阅RFC文档. 一.作用 ...
- p2p网贷系统的架构设计
p2p网贷系统,标准版已经初步完成了. 最近写点总结,也算是分享吧. 简介:p2p网贷系统,是理财类的互联网金融系统.核心功能,就是理财人用户注册,冲钱,然后投标,标到期之后,收到回款.如果不想 ...
- PatentTips - Fast awake from low power mode
BACKGROUND Electronic devices, such as electronic book readers ("eBook reader devices"), c ...
- [Grid Layout] Describe a grid layout using named grid lines
We can use named grid lines to describe our grid layout. Let’s see how to apply this to our grid-tem ...