用jquery+css控制表格样式

最新推荐文章于 2018-08-25 12:52:51 发布
最新推荐文章于 2018-08-25 12:52:51 发布
阅读量7.4k 收藏
点赞数
分类专栏： jquery实例应用 文章标签： jquery css function
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/xochenlin/article/details/3725241
版权

表格效果如下:点滑过时变色

 

 

代码:

 

  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  2. <html xmlns="http://www.w3.org/1999/xhtml" >
  3. <head>
  4.     <title>无标题页</title>
  6.     <script src="../Js/jquery.js" type="text/javascript"></script>
  7.     <script type="text/javascript">
  8.         $(function(){
  9.           Test("#e0e0e0","Teal","#ffffff","#ffffff");
  10.         });
  11.         
  12.         function Test(evenBg,oddBg,evenBgNew,oddBgNew)
  13.         {
  14.            var trs=$("#mainTable tr");
  15.            var oddTr=$("#mainTable tr:odd");
  16.            var evenTr=$("#mainTable tr:even");
  17.            
  18.            evenTr.css("background-color",evenBg);
  19.            oddTr.css("background-color",oddBg);
  20.            alert(oddTr.eq(0).html());
  21.           // var oLength=oddTr.length<evenTr.length?oddTr.length:evenTr.length;//以长的为准
  22.            for(var i=0;i<oddTr.length;i++)
  23.            {
  24.               oddTr.eq(i).bind("mouseover",function(){            
  25.                  $(this).css("background-color",oddBgNew);
  26.                  $(this).css("cursor","pointer");
  27.               });
  28.               
  29.               oddTr.eq(i).bind("mouseout",function(){               
  30.                $(this).css("background-color",oddBg);
  31.               });
  32.               
  33.               evenTr.eq(i).bind("mouseout",function(){
  34.                 $(this).css("background-color",evenBg);
  35.               });
  36.               
  37.               evenTr.eq(i).bind("mouseover",function(){
  38.                 $(this).css("background-color",evenBgNew);
  39.                  $(this).css("cursor","pointer");
  40.               });
  41.            }
  42.           
  43.            
  44. //           if(oddTr.length>evenTr.length)
  45. //           {
  46. //               oddTr[oddTr.length-1].bind("onmouseover",function(){
  47. //                oddTr[i].css("background-color",oddBgNew);
  48. //              }); 
  49. //           }
  50. //           else
  51. //           {
  52. //             evenTr[evenTr.length-1].bind("onmouseover",function(){
  53. //                evenTr[i].css("background-color",evenBgNew);
  54. //              });
  55. //           }
  56.            
  57.         }
  58.     </script>
  59.     <style type="text/css">
  60.         *
  61.         {
  62.             margin:0px;
  63.             padding:0px;
  64.             font-size:12px;
  65.             text-align:center;  
  66.             color:Yellow;
  67.             
  68.         }
  69.         #mainTable
  70.         {
  71.             width:500px;
  72.             border:5px solid #e0e0e0;
  73.             margin-top:40px;
  74.         }
  75.         
  76.         #mainTable tr
  77.         {
  78.             height:25px;
  79.             border:1px solid #e0e0e0;   
  80.           
  81.         }
  82.     </style>
  83. </head>
  84. <body>
  85.     
  86.     <table class="style1" id="mainTable" >
  87.         <tr><td>这里是表格内容</td><td>这里是表格内容</td></tr>
  88.         <tr><td>这里是表格内容</td><td>这里是表格内容</td></tr>
  89.         <tr><td>这里是表格内容</td><td>这里是表格内容</td></tr>
  90.         <tr><td>这里是表格内容</td><td>这里是表格内容</td></tr>
  91.         <tr><td>这里是表格内容</td><td>这里是表格内容</td></tr>
  92.         <tr><td>这里是表格内容</td><td>这里是表格内容</td></tr>
  93.         <tr><td>这里是表格内容</td><td>这里是表格内容</td></tr>
  94.         <tr><td>这里是表格内容</td><td>这里是表格内容</td></tr>
  95.         <tr><td>这里是表格内容</td><td>这里是表格内容</td></tr>
  96.         <tr><td>这里是表格内容</td><td>这里是表格内容</td></tr>
  97.         <tr><td>这里是表格内容</td><td>这里是表格内容</td></tr>
  98.         <tr><td>这里是表格内容</td><td>这里是表格内容</td></tr>
  99.         <tr><td>这里是表格内容</td><td>这里是表格内容</td></tr>
  101.     </table>
  102.     
  103. </body>
  104. </html>
xochenlin
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
用css和jQuery实现简单表格编辑
jurlon的专栏
03-14 823
首先做一个简单的表格              可以编辑的表格                   学号     姓名             1001     张三             1002     李四             1003     王二             1004     麻子          css
jQuery对表格进行类样式
weixin_30753873的博客
03-08 85
<%-- <%@ page language="java" contentType="text/html; charset=utf-8" pageEncoding="utf-8"%> <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/htm...
5个优雅的jQuery表格
11-17 357
厌倦了旧的无聊的HTML表格默认的外观？ jQuery的表提供您的普通HTML表的不同风格的外观和增加更多有用的功能，如列进行排序，显示计数等等。 它还提供了独特的设计和结构正常的HTML表格不能给。 jQuery的变换无聊HTML基本表到一个优雅的和有用的表 这是5个好看的jQuery表格清单。 1. HeatColor 这是一个插件，它允许您基于从元件得到的值的颜色分配给元素。 您绑...
基于jQuery的表格样式
a752711024的专栏
01-25 440
最近在搞项目的时候经常涉及到页面表格数据的显示，满屏幕的数据给用户寻找某一行带来了视觉上的挑战，小弟我也是jQuery的初学者，结合网上的资料编写了简单的效果，感觉还蛮使用的，发出来大家分享下： 希望各位高手高抬贵手，对于你们来说确实是简单的效果，请不要见怪。。。 效果截图： HTML文件代码： Java代码 &lt;html&gt;        &lt;head&gt;...
jquery、CSS控制表格常用操作
TAO_GIS的博客
07-12 524
表格占用铺满整个div：css: table { table-layout: fixed; }统计table行数var x = $("#table1").find("tr").length;设置表格第一列css: .col_1{ width:80px; }js:$('table').find('td').each(function (i) { ...
jQuery+CSS实现的table表格行列转置功能示例
10-18
3. **CSS样式定义**：在`<style>`标签中定义了两种表格样式，一种是常规的水平布局，另一种是转置后的垂直布局。`table.vertical`类应用了CSS的`writing-mode`属性，使其变为垂直布局。对于`table.vertical`内的`th`...
jQuery+CSS3价格表插件.zip
11-19
《jQuery+CSS3价格表插件》是一款集成了jQuery库和CSS3技术的前端插件，主要用于创建功能丰富、交互性强的价格表格。这个插件在HTML5的基础上，结合JavaScript的动态效果和CSS3的样式控制，能够为网页提供美观且响应...
基于HTML+jQuery+css的大学综合测评设计
最新发布
07-11
【标题】"基于HTML+jQuery+css的大学综合测评设计"是一个典型的Web应用程序开发项目，主要利用了HTML作为页面结构的基础，CSS进行样式设计，以及jQuery实现交互效果，旨在为大学提供一个综合性的评测系统。...
jquery+css3动态数据对比代码.zip
11-19
在本项目中，“jquery+css3动态数据对比代码.zip”是一个包含前端开发中使用的jQuery、CSS3技术的代码示例。这个压缩包很可能是为了演示如何利用这两种技术来实现动态数据显示和对比的功能。以下是关于这些关键技术...
jquery自定义表格样式
10-23
主要介绍了jquery如何自定义表格样式，分别实现三种样式：默认状态（灰白相间），鼠标悬浮状态（绿色），鼠标点击状态（黄色），感兴趣的小伙伴们可以参考一下
使用Bootstrap + Vue.js实现表格的动态展示、新增和删除功能
11-30
一、写在前面 1. Bootstrap是一个由 Twitter 开发和维护的前端框架，目前很受欢迎，Bootstrap中文网点击这里。 2. Vue.js 是一套构建用户界面的渐进式框架，点这里访问官网。 二、实现效果： 三、页面引入bootstrap、vue资源 &lt;link rel="stylesheet" href="//cdn.bootcss.com/font-awesome/4.7.0/css/font-awesome.css" rel="external nofollow" &gt; &lt;link rel="stylesheet" href="//maxcdn.boot
js表格刷新、全选、全不选、添加、拷贝、上下移动、删除行功能实现
08-12
对表格单元格的添加删除修改并对其进行移动以及拷贝等操作，是目前应用开发中常用的技术。 js刷新、复选框全选，全不选，添加，拷贝，上下移动，删除功能实现。
jQuery+CSS3绘制网页日历特效代码
03-20
2. **CSS3 样式**：接下来，使用 CSS3 设置日历的样式，包括背景色、字体、边框等，以及定义日期单元格的鼠标悬停和选中状态的样式。可以使用伪类如 `:hover` 和 `:active` 来实现动态效果。 3. **jQuery 初始化**...
用jQuery给表格添加样式
lyx_lyq的博客
03-26 3159
//还要有个jquery-1.12.2.min.js文件。 使用jquery实现下面的表格样式效果：     给表格加上边框，同时表格宽度800，内容居中     表格第一行文字加粗，背景色darkgreen     表格从第二行开始，奇数行和偶数行颜色要求不同     鼠标移动到表格中，除了第一行以外都有提示颜色，同时出现手型效果     点击某个内容行，可以把该行内容弹
jquery指定表格中的相应文字改变样式
六月星海的博客
08-25 2155
功能概述：实现页面加载时自动改变表格中指定文字的样式，以及通过按钮的点击实现手动改变样式   &lt;body&gt; &lt;div class="all"&gt; &lt;table class="show" height="100" border="1" cellspacing="0"&gt; &lt;tr&gt;
使用Jquery+JavaScript实现动态支付数字键盘
CSS文件用于样式化这些元素，使其看起来更符合支付界面的视觉要求，但具体样式代码没有在提供的内容中给出。接着，数字键盘的布局通过表格来实现，每个单元格代表一个数字键。这里，`<td>`元素被用作数字1、2、3，...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值