<!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>

table变色的更多相关文章

  1. 简单的css js控制table隔行变色

    (1)用expression 鼠标滑过变色: <style type="text/css"><!-- table { background-color:#0000 ...

  2. css 实现table 隔行变色

    <html> <head> <title>Member List</title> <style> <!-- .datalist{ bo ...

  3. jQuery实现table隔行换色和鼠标经过变色

    一.隔行换色 $("tr:odd").css("background-color","#eeeeee"); $("tr:even& ...

  4. [原]点击按钮，表格隔行变色：偶数行为黄色背景，奇数行为默认颜色。通过table的getElementsByTagName取得所有的tr，依次遍历，如果是偶数就…………。

    window.onload = function () { document.getElementById('btn').onclick = function () {                 ...

  5. table行随鼠标变色

    table行随鼠标变色 1.设计表格 <body class="html_body"> <div class="body_div"> & ...

  6. GridView固定行宽,自动换行,鼠标放在Table的Tr上变色

    //固定行宽table-layout:fixed;//自动换行word-break :break-all;word-wrap:break-wordGridView.Attributes.Add(&qu ...

  7. 关于table的td和ul元素li隔行变色的功能实现

    table元素的td和ul元素li隔行变色的功能实现 利用css控制二者的样式轻松实现隔行换色: 例如:table的css样式控制: table tr td{   background-color:颜 ...

  8. 隔行变色---简单的css js控制table隔行变色

    (1)用expression 鼠标滑过变色: <style type="text/css"><!-- table { background-color:#0000 ...

  9. 表格(Table)隔行变色

    在ASP.NET的Repeater控件,实现隔行变色,是极简单的事情.因为它有ListItemType.Item和ListItemType.AlternatingItem模版.如果在普通的表格(Tab ...

随机推荐

  1. mfc 连连看3.2 修改器

    内涵图 连连看3.2下载

  2. 为不同版本的 Windows 编写驱动程序

    MSDN原文:https://msdn.microsoft.com/zh-cn/library/windows/hardware/ff554887(v=vs.85).aspx 创建驱动程序项目时,指定 ...

  3. 配置grunt进行css、js的检查、合并和压缩

    现在会进行代码的合并和压缩已成为前端人员的必备知识,那么现在来介绍一个grunt的工具.grunt是个风靡世界的工具,它的首页是  http://www.gruntjs.net 这是个中文网站,有文档 ...

  4. vs2012中添加lib，.h文件方法（原）

    项目.属性.C/C++.附加包含目录:填写附加头文件(*.h)所在目录 分号间隔多项项目.属性.链接器.附加库目录:填写附加依赖库(*.lib)所在目录 分号间隔多项项目.属性.链接器(点前面的+展开 ...

  5. HsqlDB Demo

    import java.sql.Connection; import java.sql.DriverManager; import java.sql.ResultSet; import java.sq ...

  6. Java设计模式1——策略模式（Strategy Pattern）

    最近觅得一本好书<您的设计模式>,读完两章后就能断言,一定是一头极品屌丝写的,而且是专写给开发屌丝男的智慧枕边书,小女子就委屈一下,勉强看看,人笨,谁让他写得这么通俗易懂呢!为了加深理解, ...

  7. 用world写blog

    一级目录 怎么写呢? 这个和markdown那个更加方便呢? 据说插入表格有问题 我试一试         二级目录 这个大小还不错 添加第三季目录呢 三级目录 添加目录必须要用鼠标么? #inclu ...

  8. Python学习二(生成器和八皇后算法)

    看书看到迭代器和生成器了,一般的使用是没什么问题的,不过很多时候并不能用的很习惯 书中例举了经典的八皇后问题,作为一个程序员怎么能够放过做题的机会呢,于是乎先自己来一遍,于是有了下面这个ugly的代码 ...

  9. ORCLE基本语句（二）

    select语句的基本语法: [ORDER BY < COLUMN1, COLUMN2, COLUMN3...> [ASC 或 DESC]]

  10. jquery中的ajax参数

    jquery中将ajax封装成了函数,我们使用起来非常方便,jquery会自动根据内容选择post还是get方式提交数据,并且会自动编码,但是要想完全掌握jquery中的ajax,我们必须将它的各个参 ...