table变色
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>鼠标滑过效果</title>
<script src="~/Scripts/jquery-1.10.2.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$("#orderedlist tbody tr").css({"text-align":"center"});
$("#orderedlist tbody tr").hover(function() {
$(this).addClass("blue");
}, function() {
$(this).removeClass("blue");
}).click(function ( ) {
// alert($(this).children("td").eq(0).attr("id"));//获取td
alert($(this).children("td").eq(1).text());//获取td
});
});
</script>
<style>
.blue {
background: #bcd4ec;
cursor: pointer;
}
</style>
</head>
<body>
<table id="orderedlist" width="50%" border="0" cellspacing="0" cellpadding="0">
<thead id="th1">
<tr>
<th>姓名</th>
<th>年龄</th>
<th>QQ</th>
<th>Email</th>
</tr>
</thead>
<tbody id="tb1">
<tr>
<td id="tid1">AAAA</td>
<td id="num1">20</td>
<td>1111</td>
<td>aaaa@gmail.com</td>
</tr>
<tr>
<td id="tid2">BBBB</td>
<td id="num2">21</td>
<td>2222</td>
<td>bbbb@gmail.com</td>
</tr>
<tr>
<td id="tid3">CCCC</td>
<td id="num3">22</td>
<td>333</td>
<td>cccc@gmail.com</td>
</tr>
</tbody>
</table>
</body>
</html>
最新文章
- Xamarin.ios 重新定位视图
- 封装对NPOIExcel的操作，方便的设置导出Excel的样式
- Java 继承 执行顺序
- string字符串类型
- Linux学习笔记（5）-进程管理
- 将表单数据转化为json数据
- NSString属性什么时候用copy，什么时候用strong?【转】
- inheritprototype原型继承封装及综合继承最简实例
- AI人工智能-Python实现人机对话
- 【Android 应用开发】Android应用的自动更新模块
- 【译】图解Transformer
- spring boot整合servlet、filter、Listener等组件方式
- Datatable的操作方法
- C语言拼接字符串 -- 使用strcat()函数
- JS执行机制--事件循环--笔记
- centos 7 安装 BeautifulSoup 和requests
- Mybatis的分页插件PageHelp:Page对象中的pageSize等属性无法序列化,无法转换为json字符串
- bzoj1074
- 在vue项目中添加eslint规则
- Python菜鸟之路：Python基础-线程、进程、协程