.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. Python中With的用法

    在看Dive Into Python中有关描述文件读写那章节的时候,看到了有关with的用法,查阅下相关资料,记录下来,以备后用. 官方的reference上有关with statement是这样说的 ...

  2. tomacat 配置ssl协议

    1.首先用jdk自带的工具keytool生成一个"服务器证书" a.命令行进入$JAVA_HOME/bin目录($JAVA_HOME为jdk的安装目录) b.输入:keytool ...

  3. disconf实践(一)

    公司目前的应用基本采用分布式部署,通过F5进行集群管理.分布式应用带来的好处是,随着流量的增加,可以快速扩展应用节点,分摊压力.分布式也会带来一定的挑战,譬如配置文件管理.如果某个配置要修改,那么所有 ...

  4. c#基础语言编程-异常处理

    异常的定义 异常就是程序中的运行时错误,当出现异常时,系统会捕获这个错误并抛出一个异常.若程序没有提供处理该异常的代码,系统会挂起这个程序. 常见异常的类型 System.Exception 最泛化的 ...

  5. python google play

    #!/usr/env python #-*- coding: utf-8 -*- import urllib import urllib2 import random import requests ...

  6. strstr和memcmp函数的实现

    #include <stdio.h> #include <stdlib.h> //malloc()函数 typedef unsigned int size_t; size_t ...

  7. Javascript --扩展String实现替换字符串中index处字符

    String.prototype.replaceCharAt = function(n,c){ return this.substr(0, n)+ c + this.substr(n+1,this.l ...

  8. 计算机体系结构 -内存优化vm+oom

    http://www.cnblogs.com/dkblog/archive/2011/09/06/2168721.htmlhttps://www.kernel.org/doc/Documentatio ...

  9. linux下daemon守护进程的实现(以nginx代码为例)

    ngx_int_t ngx_daemon(ngx_log_t *log) { int fd; // 让init进程成为新产生进程的父进程: // 调用fork函数创建子进程后,使父进程立即退出.这样, ...

  10. ios-点击屏幕，隐藏键盘

    ios-点击屏幕,隐藏键盘 - (void)getFirstRegist{ //结束键盘编辑 __weak typeof(self)weakSelf = self; UITapGestureRecog ...