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 ...
随机推荐
- <Linux> Xen虚拟机镜像的安装
了解系统安装在哪个磁盘上:fdisk -l 建立存放虚拟机镜像的目录:mkdir /mnt/vmx 更改文件系统格式: mkfs -t ext4 /dev/sda或者/dev/sdb(系统不在的那个硬 ...
- JS表格分页组件：fupage的设计思路和具体用法(未来考虑开源,争取在2015年）
一.背景 之前在秒针工作的时候,某js高级工程师写了很多自己的组件,其中一套是分页组件,叫做st-grid.不过在我看来,bug太多,我经常给他反馈bug,我也不清楚为啥别人没有发现. ...
- 使用JSONP解决跨域问题-代码示例
前段时间用JSONP解决了跨域问题,现在不用了,把代码思路记下来,今后说不定还用得上. JS代码 //查询公告数据 function recentpost(){ $.getJSON(cmsUrl+&q ...
- html5中的dom中的各种节点的层次关系是怎样的
html5中的dom中的各种节点的层次关系是怎样的 一.总结 一句话总结:Node节点是所有节点的基类,所以都继承它的方法 1.dom提供在js中动态修改html标签的作用 比如增加修改标签等,并且是 ...
- Everything starts with a dream（A day has only 24 hours and these things take time，所以要抓紧）
There is the famous quote: "Everything starts with a dream" and many years ago, Michael Va ...
- 【u222】选课
Time Limit: 1 second Memory Limit: 128 MB [问题描述] 黄黄游历完学校,就开始要选课上了. 黄黄同学所在的学校有一个奇怪的上课系统,有N种课可以选择,每种课可 ...
- Swagger 专题
随着互联网技术的发展,现在的网站架构基本都由原来的后端渲染,变成了:前端渲染.前后端分离的形态,而且前端和后端在各自的技术道路上越走越远. 前端和后端的唯一联系,变成了API接口:API文档成了前后端 ...
- nodebb中文社区
V2MM —— 自由职业者社区 https://v2mm.tech/ 萌梦社区 https://qtdream.com/ React Native 中文社区 http://bbs.reactnativ ...
- apt-get install 的参数（add-apt-repository）
apt-get install 是 ubuntu 下的软件安装命令. sudo apt-get -y install: -y:yes,在命令行交互提示中,直接输入 yes: 1. 使用 add-apt ...
- Mac的GUI哲学
GUI 哲学 前些日子,看了 Tinyfool 老师的一篇文章<开发人员为何应该使用 Mac OS X 兼 OS X 小史>,才恍然 Mac 系统可不仅仅是 UI 上与 Windows 大 ...