<!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. 将yyyyMMdd，dd/MM/yyyy 类型字符串转换为datetime 类型 yyyy-MM-dd C#

    DateTime ConvertDate = DateTime.ParseExact(", "yyyyMMdd", null, System.Globalization. ...

  2. js对话框5秒自动消失

    使用了easyui的对话框控件 <html> <head> <title>5秒后关闭对话框</title> <meta http-equiv=&q ...

  3. mfc release 版本 内存不足 的解决方法

  4. Java与C++程序在编译和运行上的区别

    Java.C++都属于高级语言,而计算机能认识执行的只是机器码(即二进制),所以高级语言都必须经过直接或间接的转换成汇编以后,才能运行: 对于C/C++这类高级计算机语言,它们的编译器(例如Unix下 ...

  5. sklearn学习笔记2

    Text classifcation with Naïve Bayes In this section we will try to classify newsgroup messages using ...

  6. 利用nodejs搭建服务器，测试AJAX

    最近学习了AJAX一直没有进行过测试,前今天了解了Noejs搭建本地服务器下就尝试了一下.通过AJAX请求的方式获取HTTP服务器返回数据的代码 首先创建一个serve.js的文件.并写入以下代码. ...

  7. WMSWebServiceExtension 使用，支持压缩

    using System;using System.Collections.Generic;using System.IO.Compression;using System.Diagnostics;u ...

  8. <页面里折合与打开>

    主要思想是:通过覆盖,显示的方式.visible 为 true与false,id以及function函数中参数的不同. 具体代码如下: <script type="text/javas ...

  9. ZOJ 3481. Expand Tab

    题目:http://acm.zju.edu.cn/onlinejudge/showProblem.do?problemId=4278 题意: 给出一些文本片段,把文本中的 Tab 字符根据配置,替换成 ...

  10. 【转】Python资源 转自 dylanninin.com

    http://dylanninin.com/blog/2013/11/23/python_resource.html Python是在工作期间零零碎碎学习起来的.当时正值部门申购图书,鉴于Python ...