<!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. delphi locate多字段查询

    简单格式: IF MSQ_NewBillQuantity.Locate('FStockID;FMarchID', VarArrayOf([FStockID, FMarchID]), []) = Fal ...

  2. js 控制 css3高级运动 keyframes

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  3. oracle之sequence详解

    Oracle提供了sequence对象,由系统提供自增长的序列号,每次取的时候它会自动增加,通常用于生成数据库数据记录的自增长主键或序号的地方. sequence的创建需要用户具有create seq ...

  4. jsoncpp初使用

    一 前言 由于最近一个c++项目需要使用json这种数据格式来传输数据, so上网去寻找合适的类库,毕竟对于这种不是很新的技术, 自己造轮子有点得不偿失. 从百度上翻了翻, 基本上就boost跟jso ...

  5. Convert Excel data to MDB file

    所需组件: microsoft ado ext. 2.8 for ddl and security 或者更新的组件. 添加: using ADOX;using System.Runtime.Inter ...

  6. Ubuntu 下安装 SQL Server 2016初探

    安装步骤参官方 https://docs.microsoft.com/zh-cn/sql/linux/sql-server-linux-setup-ubuntu 执行命令如下: .Enter supe ...

  7. CentOS7：安装Puppet

    环境说明: 192.168.154.137 master.localdomain #Puppet Server 192.168.154.138 agent1.localdomain #Puppet A ...

  8. Python基础篇【第7篇】: 面向对象(2)

    上一篇<初识面向对象>文章介绍了面向对象基本知识: 面向对象是一种编程方式,此编程方式的实现是基于对 类 和 对象 的使用 类 是一个模板,模板中包装了多个“函数”供使用(可以讲多函数中公 ...

  9. [转]windows 短文件名/短路径名规则

    How Windows Generates 8.3 File Names from Long File Names Windows generates short file names from lo ...

  10. （推荐）WPF动画教程

    无意间发现博主的文章,记录推荐一下. http://www.cnblogs.com/alamiye010/archive/2009/06/17/1505346.html http://www.cnbl ...