.prod_description_sizechart table{margin-bottom:;width:992px;max-width:none;border-collapse:collapse;background-color:transparent;table-layout:fixed;border-spacing:;}

.table-bordered{border:1px solid #ddd;border-left:;-webkit-border-radius:4px;-moz-border-radius:4px;border-radius:4px;}

.table{margin-bottom:20px;width:100%;table-layout:fixed;}

tbody{display:table-row-group;border-color:inherit;vertical-align:middle;}

tr{display:table-row;border-color:inherit;vertical-align:inherit;}

table{margin-bottom:;width:992px;max-width:none;border-collapse:collapse;background-color:transparent;table-layout:fixed;border-spacing:;}

.prod_description_sizechart table td,.prod_description_sizechart table th{text-align:center;word-wrap:break-word;}

.table-bordered th,.table-bordered td{border-left:1px solid #ddd;}

.table-bordered th,.table-bordered td{border-left:1px solid #ddd;}

.table th,.table td{padding:8px;width:120px;border-top:1px solid #ddd;vertical-align:top;text-align:center;word-wrap:break-word;font-size:12px;line-height:20px;}

.prod_description_sizechart .prod_size em{margin:0 4px;font-style:normal;font-size:16px;}

ul,li{margin:;padding:;list-style:none;}

#p-li{margin:0 auto;margin-top:10px;width:630px;}

#p-li div{clear:both;display:none;}

li{float:left;margin-right:2px;padding:10px;background:#b9bec2;color:#FFF;cursor:default;}

.tagIn,#p-li .conIn{display:block;color:#FFF;}

.tagIn{background:#cb2027;}

.mouseover{background:#cb2027;color:#fff;}

Css Code

<div id="p-li">

    <ul>

        <li class="tagIn level-top"> Inches </li>

        <li class="level-top"> Centimeters </li>

    </ul>

    <div class="conIn level-content">

        <table class="table table-bordered">

        <tbody>

        <tr>

            <th>

                Size

            </th>

            <th>

                Bust

            </th>

            <th>

                Waist

            </th>

            <th>

                Hips

            </th>

            <th>

                Hollow to Floor

            </th>

        </tr>

        <tr>

            <td class="prod_size litb-hover" data-orig="2">

                2

            </td>

            <td class="prod_size" data-orig="83">

                32

                <em>¾</em>

            </td>

            <td class="prod_size" data-orig="65">

                25

                <em>½</em>

            </td>

            <td class="prod_size" data-orig="91">

                35

                <em>¾</em>

            </td>

            <td class="prod_size" data-orig="147">

                57

                <em>¾</em>

            </td>

        </tr>

        <tr>

            <td class="prod_size" data-orig="4">

                4

            </td>

            <td class="prod_size" data-orig="85">

                33

                <em>½</em>

            </td>

            <td class="prod_size" data-orig="68">

                26

                <em>¾</em>

            </td>

            <td class="prod_size" data-orig="93">

                36

                <em>½</em>

            </td>

            <td class="prod_size" data-orig="147">

                57

                <em>¾</em>

            </td>

        </tr>

        <tr>

            <td class="prod_size" data-orig="6">

                6

            </td>

            <td class="prod_size" data-orig="88">

                34

                <em>¾</em>

            </td>

            <td class="prod_size" data-orig="70">

                27

                <em>½</em>

            </td>

            <td class="prod_size" data-orig="96">

                37

                <em>¾</em>

            </td>

            <td class="prod_size" data-orig="150">

                59

            </td>

        </tr>

        <tr>

            <td class="prod_size" data-orig="8">

                8

            </td>

            <td class="prod_size" data-orig="90">

                35

                <em>½</em>

            </td>

            <td class="prod_size" data-orig="72">

                28

                <em>¼</em>

            </td>

            <td class="prod_size" data-orig="98">

                38

                <em>½</em>

            </td>

            <td class="prod_size" data-orig="150">

                59

            </td>

        </tr>

        <tr>

            <td class="prod_size" data-orig="10">

                10

            </td>

            <td class="prod_size" data-orig="93">

                36

                <em>½</em>

            </td>

            <td class="prod_size" data-orig="75">

                29

                <em>½</em>

            </td>

            <td class="prod_size" data-orig="101">

                39

                <em>¾</em>

            </td>

            <td class="prod_size" data-orig="152">

                59

                <em>¾</em>

            </td>

        </tr>

        <tr>

            <td class="prod_size" data-orig="12">

                12

            </td>

            <td class="prod_size" data-orig="97">

                38

                <em>¼</em>

            </td>

            <td class="prod_size" data-orig="79">

                31

            </td>

            <td class="prod_size" data-orig="105">

                41

                <em>¼</em>

            </td>

            <td class="prod_size" data-orig="152">

                59

                <em>¾</em>

            </td>

        </tr>

        <tr>

            <td class="prod_size" data-orig="14">

                14

            </td>

            <td class="prod_size" data-orig="100">

                39

                <em>¼</em>

            </td>

            <td class="prod_size" data-orig="83">

                32

                <em>¾</em>

            </td>

            <td class="prod_size" data-orig="109">

                43

            </td>

            <td class="prod_size" data-orig="155">

                61

            </td>

        </tr>

        <tr>

            <td class="prod_size" data-orig="16">

                16

            </td>

            <td class="prod_size" data-orig="104">

                41

            </td>

            <td class="prod_size" data-orig="86">

                33

                <em>¾</em>

            </td>

            <td class="prod_size" data-orig="112">

                44

            </td>

            <td class="prod_size" data-orig="155">

                61

            </td>

        </tr>

        <tr>

            <td class="prod_size" data-orig="16w">

                16w

            </td>

            <td class="prod_size" data-orig="109">

                43

            </td>

            <td class="prod_size" data-orig="92">

                36

                <em>¼</em>

            </td>

            <td class="prod_size" data-orig="116">

                45

                <em>¾</em>

            </td>

            <td class="prod_size" data-orig="155">

                61

            </td>

        </tr>

        <tr>

            <td class="prod_size" data-orig="18w">

                18w

            </td>

            <td class="prod_size" data-orig="114">

                45

            </td>

            <td class="prod_size" data-orig="98">

                38

                <em>½</em>

            </td>

            <td class="prod_size" data-orig="121">

                47

                <em>¾</em>

            </td>

            <td class="prod_size" data-orig="155">

                61

            </td>

        </tr>

        <tr>

            <td class="prod_size" data-orig="20w">

                20w

            </td>

            <td class="prod_size" data-orig="119">

                46

                <em>¾</em>

            </td>

            <td class="prod_size" data-orig="104">

                41

            </td>

            <td class="prod_size" data-orig="126">

                49

                <em>½</em>

            </td>

            <td class="prod_size" data-orig="155">

                61

            </td>

        </tr>

        <tr>

            <td class="prod_size" data-orig="22w">

                22w

            </td>

            <td class="prod_size" data-orig="124">

                48

                <em>¾</em>

            </td>

            <td class="prod_size" data-orig="109">

                43

            </td>

            <td class="prod_size" data-orig="131">

                51

                <em>½</em>

            </td>

            <td class="prod_size" data-orig="155">

                61

            </td>

        </tr>

        <tr>

            <td class="prod_size" data-orig="24w">

                24w

            </td>

            <td class="prod_size" data-orig="130">

                51

                <em>¼</em>

            </td>

            <td class="prod_size" data-orig="115">

                45

                <em>¼</em>

            </td>

            <td class="prod_size" data-orig="136">

                53

                <em>½</em>

            </td>

            <td class="prod_size" data-orig="155">

                61

            </td>

        </tr>

        <tr>

            <td class="prod_size" data-orig="26w">

                26w

            </td>

            <td class="prod_size" data-orig="135">

                53

                <em>¼</em>

            </td>

            <td class="prod_size" data-orig="121">

                47

                <em>¾</em>

            </td>

            <td class="prod_size" data-orig="141">

                55

                <em>½</em>

            </td>

            <td class="prod_size" data-orig="155">

                61

            </td>

        </tr>

        </tbody>

        </table>

    </div>

    <div class="level-content">

        <table class="table table-bordered" data-chart-unit="" data-unit="[&quot;&quot;,&quot;cm&quot;,&quot;cm&quot;,&quot;cm&quot;,&quot;cm&quot;]">

        <tbody>

        <tr>

            <th>

                Size

            </th>

            <th>

                Bust

            </th>

            <th>

                Waist

            </th>

            <th class="litb-hover">

                Hips

            </th>

            <th>

                Hollow to Floor

            </th>

        </tr>

        <tr>

            <td class="prod_size" data-orig="2">

                2

            </td>

            <td class="prod_size" data-orig="83">

                83

            </td>

            <td class="prod_size" data-orig="65">

                65

            </td>

            <td class="prod_size" data-orig="91">

                91

            </td>

            <td class="prod_size" data-orig="147">

                147

            </td>

        </tr>

        <tr>

            <td class="prod_size litb-hover" data-orig="4">

                4

            </td>

            <td class="prod_size" data-orig="85">

                85

            </td>

            <td class="prod_size" data-orig="68">

                68

            </td>

            <td class="prod_size" data-orig="93">

                93

            </td>

            <td class="prod_size" data-orig="147">

                147

            </td>

        </tr>

        <tr>

            <td class="prod_size" data-orig="6">

                6

            </td>

            <td class="prod_size" data-orig="88">

                88

            </td>

            <td class="prod_size" data-orig="70">

                70

            </td>

            <td class="prod_size" data-orig="96">

                96

            </td>

            <td class="prod_size" data-orig="150">

                150

            </td>

        </tr>

        <tr>

            <td class="prod_size" data-orig="8">

                8

            </td>

            <td class="prod_size" data-orig="90">

                90

            </td>

            <td class="prod_size" data-orig="72">

                72

            </td>

            <td class="prod_size" data-orig="98">

                98

            </td>

            <td class="prod_size" data-orig="150">

                150

            </td>

        </tr>

        <tr>

            <td class="prod_size" data-orig="10">

                10

            </td>

            <td class="prod_size" data-orig="93">

                93

            </td>

            <td class="prod_size" data-orig="75">

                75

            </td>

            <td class="prod_size" data-orig="101">

                101

            </td>

            <td class="prod_size" data-orig="152">

                152

            </td>

        </tr>

        <tr>

            <td class="prod_size" data-orig="12">

                12

            </td>

            <td class="prod_size" data-orig="97">

                97

            </td>

            <td class="prod_size" data-orig="79">

                79

            </td>

            <td class="prod_size" data-orig="105">

                105

            </td>

            <td class="prod_size" data-orig="152">

                152

            </td>

        </tr>

        <tr>

            <td class="prod_size" data-orig="14">

                14

            </td>

            <td class="prod_size" data-orig="100">

                100

            </td>

            <td class="prod_size" data-orig="83">

                83

            </td>

            <td class="prod_size" data-orig="109">

                109

            </td>

            <td class="prod_size" data-orig="155">

                155

            </td>

        </tr>

        <tr>

            <td class="prod_size" data-orig="16">

                16

            </td>

            <td class="prod_size" data-orig="104">

                104

            </td>

            <td class="prod_size" data-orig="86">

                86

            </td>

            <td class="prod_size" data-orig="112">

                112

            </td>

            <td class="prod_size" data-orig="155">

                155

            </td>

        </tr>

        <tr>

            <td class="prod_size" data-orig="16w">

                16w

            </td>

            <td class="prod_size" data-orig="109">

                109

            </td>

            <td class="prod_size" data-orig="92">

                92

            </td>

            <td class="prod_size" data-orig="116">

                116

            </td>

            <td class="prod_size" data-orig="155">

                155

            </td>

        </tr>

        <tr>

            <td class="prod_size" data-orig="18w">

                18w

            </td>

            <td class="prod_size" data-orig="114">

                114

            </td>

            <td class="prod_size" data-orig="98">

                98

            </td>

            <td class="prod_size" data-orig="121">

                121

            </td>

            <td class="prod_size" data-orig="155">

                155

            </td>

        </tr>

        <tr>

            <td class="prod_size" data-orig="20w">

                20w

            </td>

            <td class="prod_size" data-orig="119">

                119

            </td>

            <td class="prod_size" data-orig="104">

                104

            </td>

            <td class="prod_size" data-orig="126">

                126

            </td>

            <td class="prod_size" data-orig="155">

                155

            </td>

        </tr>

        <tr>

            <td class="prod_size" data-orig="22w">

                22w

            </td>

            <td class="prod_size" data-orig="124">

                124

            </td>

            <td class="prod_size" data-orig="109">

                109

            </td>

            <td class="prod_size" data-orig="131">

                131

            </td>

            <td class="prod_size" data-orig="155">

                155

            </td>

        </tr>

        <tr>

            <td class="prod_size" data-orig="24w">

                24w

            </td>

            <td class="prod_size" data-orig="130">

                130

            </td>

            <td class="prod_size" data-orig="115">

                115

            </td>

            <td class="prod_size" data-orig="136">

                136

            </td>

            <td class="prod_size" data-orig="155">

                155

            </td>

        </tr>

        <tr>

            <td class="prod_size" data-orig="26w">

                26w

            </td>

            <td class="prod_size" data-orig="135">

                135

            </td>

            <td class="prod_size" data-orig="121">

                121

            </td>

            <td class="prod_size" data-orig="141">

                141

            </td>

            <td class="prod_size" data-orig="155">

                155

            </td>

        </tr>

        </tbody>

        </table>

    </div>

</div>

Html Code

 jQuery(document).ready(function(e) {

     jQuery("#p-li li").each(function(index, element) {

         var thisLi = jQuery(this);

         thisLi.mouseover(function() {

             //alert(index);

             jQuery(".tagIn").removeClass("tagIn");

             jQuery(".conIn").removeClass("conIn");

             jQuery(this).addClass("tagIn");

             jQuery("#p-li div").eq(index).addClass("conIn");

             //圆角部分

         });

     });

     jQuery(".level-top").corner("top 8px");

     //jQuery(".level-content").corner("buttom");

     jQuery(".level-content").corner("tr bl br 8px");

     $('.table td').live("mouseover", function() {

         $(this).addClass('mouseover');

         $(this).parent().children().first().addClass('mouseover');

         var cellIndex = $(this).context.cellIndex;

         $(this).parent().parent().children().first().children().eq(cellIndex).addClass('mouseover');

     });

     $('.table td').live("mouseout", function() {

         $(this).removeClass('mouseover');

         $(this).parent().children().first().removeClass('mouseover');

         var cellIndex = $(this).context.cellIndex;

         $(this).parent().parent().children().first().children().eq(cellIndex).removeClass('mouseover');

     });

 });

JavaScript Code

这里全部用到JQuery做的，当然直接写JavaScript也不难。

最终效果

JQuery焦点Table的更多相关文章

  1. 强大的自适应jQuery焦点图特效

    jQuery焦点图切换自适应效果 自适应jQuery焦点图特效是一款支持移动端的响应式jQuery焦点图插件,支持flexible布局,支持移动触摸事件等. 今天我们要来分享一款很灵活的jQuery焦 ...

  2. jQuery操作Table tr td常用的方法

    虽然现在DIV+CSS进行页的布局大行其道,但是很多地方使用table还是有很多优势,用table展示数据是比较方便的,下面汇总了jQuery操作Table tr td常用的方法,熟记这些操作技巧,下 ...

  3. 汇总常用的jQuery操作Table tr td方法

    虽然现在DIV+CSS进行页的布局大行其道,但是很多地方使用table还是有很多优势,用table展示数据是比较方便的,下面汇总了jQuery操作Table tr td常用的方法,熟记这些操作技巧,下 ...

  4. jquery隐藏table表格的某一列

    jquery隐藏table表格的某一列: $('table tr').find('td:eq(13)').hide(); 隐藏table的第13列

  5. JQuery操作Table元素

    使用Jquery操作Table中的tr向上或向下移动,以及全选和反选操作. 点击Table Head中的复选框,全选或反选表格中所有的复选框; 选中复选框,点击Up 按钮, tr上移;点击 Down ...

  6. 基于jQuery打造的选项卡向上弹出jquery焦点图切换特效

    基于jQuery打造的选项卡向上弹出jquery焦点图切换特效 鼠标经过标题栏,会出现层特效向上滑动,并且在同时进行幻灯片切换,效果十分不错. 有兴趣的童鞋可以下载看看,在IE6方面兼容性也不错,只有 ...

  7. 分享10款常用的jQuery焦点图插件

    爱编程一直在收集整理编程相关的知识和解决方案,今天小编为大家带来10款非常常用的jquery焦点图插件. 1.jQuery可自动播放动画的焦点图插件 之前我们已经分享过很多非常实用的jQuery焦点图 ...

  8. 8款超绚丽的jQuery焦点图动画

    随着前端技术和浏览器技术的不断发展,人们开始对网页视觉效果的要求越来越高.我们经常会在页面中看到很多炫酷的图片焦点图播放控件,有些甚至是大屏的焦点图占用大片的页面空间,从而吸引用户的眼球.本文要分享的 ...

  9. 一款仿PBA官网首页jQuery焦点图的切换特效

    一款仿PBA官网首页jQuery焦点图的切换特效,非常的简单大方, 在对浏览器兼容性的方面做了不少的功夫.IE6也勉强能过去. 还是一款全屏的焦点图切换特效.大气而清新.很适合简介大方的网站. 下图还 ...

随机推荐

  1. 基础排序算法之并归排序(Merge Sort)

    并归排序是学习分治法 (Merge Sort) 的好例子.而且它相对于选择,插入,冒泡排序来说,算法性能有一定提升.我首先会描述要解决的问题,并给出一个并归排序的例子.之后是算法的思路以及给出伪代码. ...

  2. UNION、EXCEPT和INTERSECT操作查询结果

    对查询结果进行合并.剔除.取重操作可以通过UNION.EXCEPT和INTERSECT实现 任意一种操作都要满足以下两个条件: 1.字段的数量和顺序一致 2.对应字段的数据类型相兼容 一.UNION ...

  3. 【转载】nginx 并发数问题思考：worker_connections,worker_processes与 max clients

    注:这个文章主要是作者一直在研究nginx作为http server和反向代理服务器时候所谓最大的max_clients和 worker_connections的计算公式, 其实最后的结论也没有卡上公 ...

  4. 洛谷 P1005 矩阵取数游戏

    题目描述 帅帅经常跟同学玩一个矩阵取数游戏:对于一个给定的n*m的矩阵,矩阵中的每个元素aij均为非负整数.游戏规则如下: 1.每次取数时须从每行各取走一个元素,共n个.m次后取完矩阵所有元素: 2. ...

  5. winform DataGridView双击修改单元格的值 分类： DataGridView 2014-08-04 19:39 150人阅读 评论(0) 收藏

    定义全局变量 string abcmycode = "";//当前行自编号 bool tf = false;//是否双击 //双击可编辑         private void ...

  6. 构建ASP.NET MVC4+EF5+EasyUI+Unity2.x注入的后台管理系统（34）-文章发布系统①-简要分析

    原文:构建ASP.NET MVC4+EF5+EasyUI+Unity2.x注入的后台管理系统(34)-文章发布系统①-简要分析 系列目录 最新比较闲,为了学习下Android的开发构建ASP.NET ...

  7. MediaInfo源代码分析 4：Inform()函数

    我们来看一下MediaInfo中的Inform()函数的内部调用过程 首先Inform()函数封装了MediaInfo_Internal类中的Inform()函数 //返回文件信息 String Me ...

  8. UITableView beginUpdate和endUpdate使用的前提

    转载地址:http://blog.csdn.net/vieri_ch/article/details/46893023 UITableView有两个方法,用于单元格动画变化的方法,beginUpdat ...

  9. [转] nginx 开启gzip压缩--字符串压缩比率很牛叉

    http://www.cnblogs.com/dasn/articles/3716055.html 刚刚给博客加了一个500px相册插件,lightbox引入了很多js文件和css文件,页面一下子看起 ...

  10. 【译】Android应用架构

    Android开发生态圈的节奏非常之快.每周都会有新的工具诞生,类库的更新,博客的发表以及技术探讨.如果你外出度假一个月,当你回来的时候可能已经发布了新版本的Support Library或者Play ...