javascript - 卡住第一列和标题，但它们现在没有出现

Question

我在论坛中进行了搜索，找到了如何让它发挥作用的方法。好吧，当我将它用于我的数据时，第一列和标题消失了，但似乎像我想要的那样滚动。这是我目前所拥有的 fiddle :http://jsfiddle.net/p9PeK/7/

这是 HTML:

<div class='q1'><div class='container'></div></div>
<div class='q2'><div class='container'></div></div>
<div class='q3'><div class='container'></div></div>
<div class='q4'>
    <div id='container'>
        <table>
            <thead>
                <tr>
                    <td class='firstCol'>Julian Date</td>
                    <td class='records'>Records</td>
                    <td class='deals'>Deals</td>
                    <td class='cpo'>CPO</td>
                    <td class='state'>AL Rec</td>
                    <td class='state'>AL Sold</td>
                    <td class='state'>AK Rec</td>
                    <td class='state'>AK Sold</td>
                    <td class='state'>AZ Rec</td>
                    <td class='state'>AZ Sold</td>
                    <td class='state'>AR Rec</td>
                    <td class='state'>AR Sold</td>
                    <td class='state'>CO Rec</td>
                    <td class='state'>CO Sold</td>
                </tr>
            </thead>
            <tbody>
                <tr bgcolor='#FFFFFF'>
                    <td class='firstCol'>242</td>
                    <td class='records'>75005</td>
                    <td class='deals'>0</td>
                    <td bgcolor='#FF6262' class='cpo'>28,464.40</td>
                    <td class='state'>4716</td>
                    <td class='state'>0</td>
                    <td class='state'>0</td>
                    <td class='state'>0</td>
                    <td class='state'>866</td>
                    <td class='state'>0</td>
                    <td class='state'>0</td>
                    <td class='state'>0</td>
                    <td class='state'>0</td>
                    <td class='state'>0</td>
                </tr>
                <tr bgcolor='#D8D8D8'>
                    <td class='firstCol'>241</td>
                    <td class='records'>72798</td>
                    <td class='deals'>0</td>
                    <td bgcolor='#FF6262' class='cpo'>27,626.84</td>
                    <td class='state'>0</td>
                    <td class='state'>0</td>
                    <td class='state'>0</td>
                    <td class='state'>0</td>
                    <td class='state'>0</td>
                    <td class='state'>0</td>
                    <td class='state'>0</td>
                    <td class='state'>0</td>
                    <td class='state'>0</td>
                    <td class='state'>0</td>
                </tr>
                <tr bgcolor='#FFFFFF'>
                    <td class='firstCol'>240</td>
                    <td class='records'>77212</td>
                    <td class='deals'>0</td>
                    <td bgcolor='#FF6262' class='cpo'>29,301.95</td>
                    <td class='state'>0</td>
                    <td class='state'>0</td>
                    <td class='state'>0</td>
                    <td class='state'>0</td>
                    <td class='state'>0</td>
                    <td class='state'>0</td>
                    <td class='state'>0</td>
                    <td class='state'>0</td>
                    <td class='state'>0</td>
                    <td class='state'>0</td>
                </tr>
                <tr bgcolor='#D8D8D8'>
                    <td class='firstCol'>239</td>
                    <td class='records'>74151</td>
                    <td class='deals'>2</td>
                    <td bgcolor='#FF6262' class='cpo'>14,070.15</td>
                    <td class='state'>0</td>
                    <td class='state'>0</td>
                    <td class='state'>0</td>
                    <td class='state'>0</td>
                    <td class='state'>0</td>
                    <td class='state'>0</td>
                    <td class='state'>0</td>
                    <td class='state'>0</td>
                    <td class='state'>0</td>
                    <td class='state'>0</td>
                </tr>
                <tr bgcolor='#FFFFFF'>
                    <td class='firstCol'>238</td>
                    <td class='records'>75859</td>
                    <td class='deals'>14</td>
                    <td bgcolor='#FF6262' class='cpo'>2,056.32</td>
                    <td class='state'>0</td>
                    <td class='state'>0</td>
                    <td class='state'>0</td>
                    <td class='state'>0</td>
                    <td class='state'>0</td>
                    <td class='state'>0</td>
                    <td class='state'>0</td>
                    <td class='state'>0</td>
                    <td class='state'>0</td>
                    <td class='state'>0</td>
                </tr>
                <tr>
                    <td class='firstCol'><b>Totals</b></td>
                    <td><b>375,025</b> </td>
                    <td><b>16</b></td>
                    <td><b>8,895.12</b></td>
                </tr>
            </tbody>
        </table>
    </div>
</div>

这是javascript:

$(document).ready(function () {
    $('.q4').bind('scroll', fnscroll);
    $('.q2').html($('.q4').html());
    $('.q3').html($('.q4').html());
});

function fnscroll() {
    //alert('*');
    $('.q2').scrollLeft($('.q4').scrollLeft());
    $('.q3').scrollTop($('.q4').scrollTop());
}

这是 CSS:

body {width:500px;}
.q1, .q2, .q3, .q4 {overflow:hidden; display:block; float:left;}
.q1 {width:48px; height: 47px;}
.q2 {width:450px; height: 47px;}
.q3 {width:48px; height: 100px;}
.q4 {width:452px; height: 116px; overflow:auto;}

.q2 .firstCol, .q3 thead, .q4 thead, .q4 .firstCol {display:none;}
.q2 td {background-color:#D8D8D8;}
.q3 td {background-color:#D8D8D8;}

.container {width:500px;}

table td.state, table td.year {width: 40px; min-width:40px;}
table td.records {width: 57px; min-width:57px;}
table td.deals {width: 40px; min-width:40px;}
table td.cpo {width: 65px; min-width:65px; text-align:right;}
table thead tr td.cpo {width: 65px; min-width:65px; text-align:center;}

标题和第一列不显示我做错了什么？

Answer 1

这一行隐藏了一切

.q2 .firstCol, .q3 thead, .q4 thead, .q4 .firstCol {display:none;}

检查工作 fiddle :

http://jsfiddle.net/p9PeK/8/

干杯。

维托。