.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. 2013=7=12 ACM培训第一天

    ACM培训第一天,尽管我嘴上说是来打酱油的,但我非常想学好.1.一定要多思考,多总结:2.多问同学 :3.学会向女生说话,大胆,自信.(今天有女生向我说话了,很高兴.她很大胆,我要向她学习...... ...

  2. hdu4281 区间dp

    题目链接:http://acm.hdu.edu.cn/showproblem.php?pid=4283 #include<iostream> #include<algorithm&g ...

  3. Oracle RAC中的投票算法

    RAC集群中有三台机器,A,B,C A,B,C都会有3票,假设这是A的心跳线出现问题,整个RAC集群就划分为两个paritition, 一个是只有A的partition,一个是B,C组成的partit ...

  4. linux 监控命令

    先总结下常用的一些监控工具: ##linux命令 w 系统负载 lsof -p pid 进程打开的文件 lsof -i:port 端口的运行情况 free -m 内存情况 vmstat 进程.内存.内 ...

  5. 几个命令行命令的总结(node, babel-cli, babel-node)

    node: 输入node, 进入repl环境之后,可以直接运行javascsript表达式,模拟node输出 sh-it-nb0023:static xialei$ node > console ...

  6. oracle正则截取字符串的函数

    现在有这么一个需求, 数据库中的一个手输的'籍贯'字段,要按一定的规范截取显示在报表上,比如,如果'籍贯'的内容是:'山东省潍坊市昌乐县', 那么报表里要显示为:'山东昌乐', 如果'籍贯'是山东省潍 ...

  7. OMCS的语音视频带宽占用

    OMCS的语音.视频.电子白板.远程桌面等功能对网络带宽的要求分别如何了? 我们先假设一种常见的场景:假设N个在线用户同时进行1对1的多媒体沟通(即分为N/2组),在不考虑P2P通道的情况下,带宽的大 ...

  8. PPT五大插件汇总下载

    收集总结一下PPT制作中常用到的插件/应用,希望能帮到大家. 1.Nordri Tools NT插件是由Nordri公司开发的PPT插件,功能强大,简单易上手,设计偷懒必备神器.我们可以看看它有哪些功 ...

  9. OpenSSL使用指南

    OpenSSL使用指南 1     介绍 OpenSSL是使用非常广泛的SSL的开源实现.由于其中实现了为SSL所用的各种加密算法,因此OpenSSL也是被广泛使用的加密函数库. 1.1   SSL ...

  10. TOJ 2732存钱计划（三）（单源最短路）

    存钱计划(三)   时间限制(普通/Java):1000MS/30000MS     运行内存限制:65536KByte 总提交: 18            测试通过: 16 描述 TZC的店铺比较 ...