JQuery焦点Table

.prod_description_sizechart table{margin-bottom:0;width:992px;max-width:none;border-collapse:collapse;background-color:transparent;table-layout:fixed;border-spacing:0;}
.table-bordered{border:1px solid #ddd;border-left:0;-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:0;width:992px;max-width:none;border-collapse:collapse;background-color:transparent;table-layout:fixed;border-spacing:0;}
.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:0;padding:0;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

 1 jQuery(document).ready(function(e) {
 2     jQuery("#p-li li").each(function(index, element) {
 3         var thisLi = jQuery(this);
 4         thisLi.mouseover(function() {
 5             //alert(index);
 6             jQuery(".tagIn").removeClass("tagIn");
 7             jQuery(".conIn").removeClass("conIn");
 8
 9             jQuery(this).addClass("tagIn");
10             jQuery("#p-li div").eq(index).addClass("conIn");
11
12             //圆角部分
13
14         });
15     });
16     jQuery(".level-top").corner("top 8px");
17     //jQuery(".level-content").corner("buttom");
18     jQuery(".level-content").corner("tr bl br 8px");
19     $(‘.table td‘).live("mouseover", function() {
20         $(this).addClass(‘mouseover‘);
21         $(this).parent().children().first().addClass(‘mouseover‘);
22         var cellIndex = $(this).context.cellIndex;
23         $(this).parent().parent().children().first().children().eq(cellIndex).addClass(‘mouseover‘);
24     });
25     $(‘.table td‘).live("mouseout", function() {
26         $(this).removeClass(‘mouseover‘);
27         $(this).parent().children().first().removeClass(‘mouseover‘);
28         var cellIndex = $(this).context.cellIndex;
29         $(this).parent().parent().children().first().children().eq(cellIndex).removeClass(‘mouseover‘);
30     });
31 });

JavaScript Code

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

最终效果

时间： 2024-08-28 15:46:29

JQuery焦点Table的相关文章

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

jQuery焦点图切换自适应效果 自适应jQuery焦点图特效是一款支持移动端的响应式jQuery焦点图插件,支持flexible布局,支持移动触摸事件等. 今天我们要来分享一款很灵活的jQuery焦点图插件,和以前介绍的jQuery焦点图动画类似,它也提供左右切换按钮,同时在图片上悬浮自定义图片切换按钮.切换动画包括上下左右切入动画以及淡入淡出动画.这款jQuery焦点图最大的特点是支持移动端触摸功能. 体验效果:http://hovertree.com/texiao/jquery/17/ 代

jQuery遍历table中的tr td并获取td中的值

jQuery遍历table中的tr td并获取td中的值 $(function(){ $("#tableId tr").find("td").each(function(){ <span style="white-space:pre"> </span> var year = $("#year").val(); var month = $("#month").val(); var da

jquery遍历table tr td内容

$("#result").find("tr").each(function () { $(this).find("td").each(function () { if ($(this).text().indexOf("惠") > 0) { var m = $(this).text().toString(); $(this).css("width", "165px"); $(this

关于Jquery获取Table中td内的内容

$(this).children().eq(1).text()获取的是显示的值$(this).children().eq(1).html()获取的是<td></td>之间的所有内容$('.trSelected',grid).find("td").eq(7).text();获取的是选中的某行的内容 遍历表<table id="gird"..... $("#grid tr").each(function() {     

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

虽然现在DIV+CSS进行页的布局大行其道,但是很多地方使用table还是有很多优势,用table展示数据是比较方便的,下面汇总了jQuery操作Table tr td常用的方法,熟记这些操作技巧,下次再使用的到时候,会让你如鱼得水,提高开发效率. 1.鼠标移动行变色  $("#table1 tr").hover(function(){ $(this).children("td").addClass("hover") },function(){

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

爱编程一直在收集整理编程相关的知识和解决方案,今天小编为大家带来10款非常常用的jquery焦点图插件. 1.jQuery可自动播放动画的焦点图插件 之前我们已经分享过很多非常实用的jQuery焦点图插件,大部分对开发者来说基本上可以直接拿来使用.今天我们要分享一款可以自动播放动画的jQuery焦点图插件,它在切换图片的时候可以播放对应图片的各种动画效果. 在线预览   源码下载 2.jQuery可自动播放动画的焦点图插件 这次我们要分享的这款jQuery焦点图非常特别,它的外观特别简单,但是又

10款华丽最新jQuery焦点图动画插件

1.jQuery带对比功能的焦点图插件 我们在这里已经分享过很多炫酷的jQuery焦点图插件,大部分焦点图插件都比较实用.今天要分享的这款有几个特点:第一是焦点图带有缩略图预览功能,第二是焦点图中的图片带有和原图进行对比的功能,并且这款jQuery焦点图还支持定时图片切换,非常实用. 在线演示一 在线演示二 源码下载 2.Devrama Slider - 支持任意 HTML 的内容滑块 Devrama Slider 是一个图片滑块,支持很多特色功能.除了支持图片滑动,其它的 HTML 内容也支持

超酷实用的jQuery焦点图赏析及源码

焦点图应用在现代网页中使用十分广泛,有注重简单小巧的,也有注重华丽美观的,大部分jQuery焦点图都可以滑动和切换图片,并且在切换图片时产生不同的动画特效.今天我们要分享一些超酷而且实用的jQuery焦点图插件,并分享它们的源代码. 1.jQuery多动画切换焦点图 之前我们已经分享过很多超酷的jQuery焦点图插件了,而且也都相当实用.今天我们要再来介绍一款可实现多种切换动画的jQuery焦点图,这款焦点图整体非常简单,左右两侧各有一个上一张和下一张的切换按钮.每张图片在切换时也都有各不相同的

jQuery实现table隔行换色和鼠标经过变色

一.隔行换色 $("tr:odd").css("background-color","#eeeeee"); $("tr:even").css("background-color","#ffffff"); 或者一行搞定: $("table tr:nth-child(odd)").css("background-color","#eeeeee