jquery实现表格隔行换色效果

本文实例讲述了jquery实现表格隔行换色效果的代码。分享给大家供大家参考。具体如下:
运行效果截图如下:

具体代码如下:

1、新建一个web项目,jQuery;
2、在WebContent目录下新建script文件夹,将jquery-1.10.1.js复制到script中;
3、同样,新建TableColor.html;
TableColor.html:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>表格间隔色</title>
<script type="text/javascript" src="script/jquery-1.10.1.js"></script>
<style type="text/css">
  body
  {
   width:100%;
   height:100%;
   font-size:12px;
  }
  table
  {
   width:80%;
   height:90%;
  }
  .tr_odd
  {
   background: #EBF2FE;
  }
  .tr_even
  {
   background: #B4CDE6;
  }
  .tab_body
  {
   text-align: center;
  }
</style>
<script type="text/javascript">
  $(function(){
    $("tr:odd").addClass("tr_odd");
    $("tr:even").addClass("tr_even");
  });
</script>
</head>
<body>
  <table>
   <tr style="background: #CCCCCC;text-align: center;">
    <th>学号</th>
    <th>姓名</th>
    <th>年龄</th>
    <th>性别</th>
   </tr>
   <tr class="tab_body">
    <td>2013060101</td>
    <td>张华</td>
    <td>23</td>
    <td>男</td>
   </tr>
   <tr class="tab_body">
    <td>2013060102</td>
    <td>赵雪</td>
    <td>24</td>
    <td>女</td>
   </tr>
   <tr class="tab_body">
    <td>2013060103</td>
    <td>孙旭</td>
    <td>21</td>
    <td>男</td>
   </tr>
   <tr class="tab_body">
    <td>2013060104</td>
    <td>李姝</td>
    <td>20</td>
    <td>女</td>
   </tr>
   <tr class="tab_body">
    <td>2013060105</td>
    <td>公孙旭</td>
    <td>22</td>
    <td>男</td>
   </tr>
   <tr class="tab_body">
    <td>2013060106</td>
    <td>李枝花</td>
    <td>24</td>
    <td>女</td>
   </tr>
   <tr class="tab_body">
    <td>2013060107</td>
    <td>魏征</td>
    <td>22</td>
    <td>男</td>
   </tr>
   <tr class="tab_body">
    <td>2013060108</td>
    <td>施礼</td>
    <td>20</td>
    <td>女</td>
   </tr>
   <tr class="tab_body">
    <td>2013060109</td>
    <td>王志</td>
    <td>23</td>
    <td>男</td>
   </tr>
   <tr class="tab_body">
    <td>2013060104</td>
    <td>方小许</td>
    <td>20</td>
    <td>女</td>
   </tr>
  </table>
</body>
</html>

以上就是本文的全部内容,希望对大家学习javascript程序设计有所帮助。

(0)

相关推荐

  • jquery自定义表格样式

    本文实例讲述了jquery自定义表格样式实现代码.分享给大家供大家参考.具体如下: 运行效果截图如下: 上面这张图有3种状态,默认状态(灰白相间),鼠标悬浮状态(绿色),鼠标点击状态(黄色),是如何实现的呐? Html代码如下: <table> <thead> <tr> <td>编号</td> <td>姓名</td> <td>年龄</td> <td>操作</td> </

  • 基于jquery实现表格无刷新分页

    本文实例讲解了基于jquery实现表格无刷新分页功能,分享给大家供大家参考,具体内容如下 效果图: 具体代码: <html> <head> <title>面向对象的无刷新表格分页</title> <meta http-equiv="content-type" content="text/html;charset=utf-8"/> <link rel="stylesheet" hre

  • 基于jQuery实现的无刷新表格分页实例

    本文实例讲述了基于jQuery实现的无刷新表格分页.分享给大家供大家参考,具体如下: 效果图如下: html结构: <table id="cs_table" class="datatable"></table> css样式: html,body{margin: 0;padding:0} a:focus {outline: none;} /* 通用表格显示 */ table, th, td {font: 12px Arial,Helvetica

  • 使用jQuery操作HTML的table表格的实例解析

    最终效果图: 简单来看一下其中的主要部分: HTML: .td_back_color { background-color: red; } .td_center { text-align: center; font-weight:bold; } CSS: <table id="tbl_count"> <caption>2013春节聚会收支统计</caption> <tr> <th>姓名</th> <th>

  • jQuery操作表格(table)的常用方法、技巧汇总

    以下列出13个jQuery操作table常用到的功能: 1.鼠标移动行变色 复制代码 代码如下: $('#table1 tr').hover(function(){    $(this).children('td').addClass('hover')}, function(){    $(this).children('td').removeClass('hover')}); 方法二: 复制代码 代码如下: $("#table1 tr:gt(0)").hover(function()

  • jQuery插件实现表格隔行变色及鼠标滑过高亮显示效果代码

    本文实例讲述了jQuery插件实现表格隔行变色及鼠标滑过高亮显示效果的方法.分享给大家供大家参考,具体如下: 此插件旨在实现表格隔行变色,且鼠标移动在表格的某一行上时,该行能高亮显示.整体代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <htm

  • 基于jQuery实现点击最后一行实现行自增效果的表格

    现在任何事务都追求效率和人性化,当然网页效果也是如此,如果一个可以编辑数据的表格,编辑到最后一行的时候,点击可以自动添加一行,这样算是一个比较人性化的效果,可以免去一丝劳顿之苦,下面分享一段这样的代码. 代码如下: <!DOCTYPE html> <html> <head> <meta charset=" utf-8"> <meta name="author" content="http://www.j

  • jQuery实现获取table表格第一列值的方法

    本文实例讲述了jQuery实现获取table表格第一列值的方法.分享给大家供大家参考,具体如下: 先来看看运行效果截图: 完整代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd" > <html xmlns="http://www.w3.or

  • jQuery实现的调整表格行tr上下顺序

    表格是大家比较常用的元素,有时候表格中的行需要调整顺序,下面就通过代码实例介绍一下如何利用jquery实现此功能. 代码实例如下: <!DOCTYPE html> <html> <head> <meta charset=" utf-8"> <meta name="author" content="http://www.softwhy.com/" /> <title>我们<

  • jquery调整表格行tr上下顺序实例讲解

    表格是大家比较常用的元素,有时候表格中的行需要调整顺序,下面就通过代码实例介绍一下如何利用jquery实现此功能,分享给大家供大家参考,具体内容如下 代码实例如下: <html> <head> <meta charset=" utf-8"> <meta name="author" content="http://www.softwhy.com/" /> <title>蚂蚁部落</t

随机推荐