素敵なテーブルシームレス圧延を共有:(それに本当の快適）
直接あなたのプログラムにコードをコピーします。
1.HTML
<DIV CLASS = "tablebox">
<DIV CLASS = "TBL-ヘッダ">
<テーブル境界= "0" CELLSPACING = "0" CELLPADDING = "0">
<THEAD>
<TR>
<TH>ランキング</番目>
<番目>都市</ TH>
<目>売上高（百万円）</ TH>
<目>前年同期比（％）</ TH>
<目>チェーン（％）</ TH>
<目>の販売プログラム（万元）</ TH>
<TH>完了率（％）</ TH>
</ TR>
</ THEAD>
<TBODYスタイル= "不透明度：0;"> </ TBODY>
</ TABLE>
</ div>
<divのクラス= "TBL-ボディ">
<表国境= "0" CELLSPACING = "0" CELLPADDING = "0">
<THEAD>
<TR>
<TH>ランキング</ TH>
<TH>都市</ TH>
<TH>総売上高（百万円） </ TH>
<TH>前年比（％）</ TH>
<TH>チェーン（％）</ TH>
<TH>販売プログラム（百万）</ TH>
<TH>完了率（％）</ TH>
</ TR>
</ thead要素>
<TBODY> </ TBODY>
</表>
</ div>
</ div>
2.CSS
.tablebox {
高さ：500pxなど。
オーバーフロー：隠されました;
位置：相対;
幅：1000px;
マージン：100pxに自動;
}.TBLヘッダー{
幅：100％。
位置：絶対;
トップ：0;
左：0;
Zインデックス：999;
}.TBLボディ{
幅：100％。
位置：絶対;
トップ：0;
左：0;
}
.tableboxテーブル{
幅：100％。
}.tableboxテーブル番目、
.tableboxテーブルTD {
フォントサイズ：24ピクセル。
色：＃7ca6f4。
行の高さ：45px;
テキスト整列：センター;
}.tableboxテーブルTR番目{
カーソル：ポインタ。
}.tableboxテーブルのTR TD {
}.TBL体TR：n番目の子（偶数）TD、.TBL-body1 TR：n番目の子（偶数）TD {
}.tableboxテーブルのTR TDスパン、
.tableboxテーブルのTR TDスパン{
フォントサイズ：24ピクセル。
}
3.JavaScript
VAR MyMarhq = '';
clearInterval（MyMarhq）。
$（ 'TBL-ボディTBODY。'）（）を空にします。;
$（ 'TBLヘッダTBODY。'）（）を空にする。
VAR STR = '';
[{ "ランキング" VAR項目= "1"、 "市"： "保定"、 "SaleIncome"： "2506734.43"、 "SaleRough"： "296071.96"、 "SalePlan"： "7200000"、 "PlanFinish"：」 34.82" 、 "TonOilincome"： "264.15"、 "OilTransform"： "29.62"、 "an"は"53.00"、 "ママ"： " - 13.00"}、
{ "ランキング"： "2"、 "市"： "沧州"、 "SaleIncome"： "1425935.58"、 "SaleRough"： "93717.83"、 "SalePlan"： "3200000"、 "PlanFinish"： "44。
{ "ランキング"： "4"、 "市"： "衡水"、 "SaleIncome"： "972451.15"、 "SaleRough"： "87638.60"、 "SalePlan"： "270万"、 "PlanFinish"： "36.02"、」 TonOilincome "：" 246.03" 、 "OilTransform"： "11.56"、 "an"は"15.00"、 "ママ"： " - 18.00"}、
{ "ランキング"： "5"、 "街"： "石家庄"、 "SaleIncome"： "939010.52"、 "SaleRough"： "140217.37"、 "SalePlan"： "7200000"、 "PlanFinish"： "13.04"、 "TonOilincome"： "139.44"、 "OilTransform"： "19.23"、 "アン"：" - 57.00" 、 "母"： " - 48.00"}、
{ "ランキング"：」6" 、 "市"： "邢台"、 "SaleIncome"： "774274.70"、 "SaleRough"： "124693.90"、 "SalePlan"： "370万"、 "PlanFinish"： "20.93"、 "TonOilincome"： "138.87" 、 "OilTransform"： "9.44"、 "an"は" - 20.00"、 "ママ"： " - 44.00"}、
{ "ランキング"： "7"、 "市"、 "唐山"、 "SaleIncome"：」 680456.79" 、 "SaleRough"： "50542.14"、 "SalePlan"： "3600000"、 "PlanFinish"： "18.90"、 "TonOilincome"： "243.60"、 "OilTransform"： "16.95"、 "アン"： " - 29.00 」、 "ママ"： " - 49.00"}、70" 、 "SaleRough"： "124693.90"、 "SalePlan"： "370万"、 "PlanFinish"： "20.93"、 "TonOilincome"： "138.87"、 "OilTransform"： "9.44"、 "アン"： " - 20.00 " "ママ"： " - 44.00"}、 { "ランキング"： "7"、 "市"、 "唐山"、 "SaleIncome"： "680456.79"、 "SaleRough"： "50542.14"、 "SalePlan"：" 3600000" 、 "PlanFinish"： "18.90"、 "TonOilincome"： "243.60"、 "OilTransform"： "16.95"、 "アン"： " - 29.00"、 "ママ"： " - 49.00"}、70" 、 "SaleRough"： "124693.90"、 "SalePlan"： "370万"、 "PlanFinish"： "20.93"、 "TonOilincome"： "138.87"、 "OilTransform"： "9.44"、 "アン"： " - 20.00 " "ママ"： " - 44.00"}、 { "ランキング"： "7"、 "市"、 "唐山"、 "SaleIncome"： "680456.79"、 "SaleRough"： "50542.14"、 "SalePlan"：" 3600000" 、 "PlanFinish"： "18.90"、 "TonOilincome"： "243.60"、 "OilTransform"： "16.95"、 "アン"： " - 29.00"、 "ママ"： " - 49.00"}、"138.87"、 "OilTransform"： "9.44"、 "an"は" - 20.00"、 "ママ"： " - 44.00"}、 { "ランキング"： "7"、 "市"、 "唐山"、 "SaleIncome "：" 680456.79" 、 "SaleRough"： "50542.14"、 "SalePlan"： "3600000"、 "PlanFinish"： "18.90"、 "TonOilincome"： "243.60"、 "OilTransform"： "16.95"、 "アン"： "-29.00"、 "ママ"： " - 49.00"}、"138.87"、 "OilTransform"： "9.44"、 "an"は" - 20.00"、 "ママ"： " - 44.00"}、 { "ランキング"： "7"、 "市"、 "唐山"、 "SaleIncome "：" 680456.79" 、 "SaleRough"： "50542.14"、 "SalePlan"： "3600000"、 "PlanFinish"： "18.90"、 "TonOilincome"： "243.60"、 "OilTransform"： "16.95"、 "アン"： "-29.00"、 "ママ"： " - 49.00"}、SalePlan "：" 3600000" 、 "PlanFinish"： "18.90"、 "TonOilincome"： "243.60"、 "OilTransform"： "16.95"、 "アン"： " - 29.00"、 "ママ"： " - 49.00"}、SalePlan "：" 3600000" 、 "PlanFinish"： "18.90"、 "TonOilincome"： "243.60"、 "OilTransform"： "16.95"、 "アン"： " - 29.00"、 "ママ"： " - 49.00"}、
{ "ランキング"： "8"、 "市"： "张家口"、 "SaleIncome"： "613319.87"、 "SaleRough"： "176075.96"、 "SalePlan"： "3000000"、 "PlanFinish"： "20.44"、」 TonOilincome "：" 87.09" 、 "OilTransform"： "7.97"、 "an"は"2.00"、 "ママ"： " - 24.00"}、
{ "ランキング"： "9"、 "市"、「中油华奥」、 "SaleIncome"： "596575.25"、 "SaleRough"： "387024.26"、 "SalePlan"： "11000000"、 "PlanFinish"： "5.42"、 "TonOilincome"： "93.58"、 "OilTransform"： "19.06"、 "an"は"35.00"、 "ママ"： "6.00"}、
{ "ランキング"：」10" 、 "市"： "承德"、 "SaleIncome"： "589048.12"、 "SaleRough"： "68966.73"、 "SalePlan"： "220万"、 "PlanFinish"： "26.77"、 "TonOilincome"： "193.24" 、 "OilTransform"： "11.29"、 "an"は"30.00"、 "ママ"： " - 28.00"}、
{ "ランキング"： "11"、 "市"： "廊坊"、 "SaleIncome"： "515448.14 」、 "SaleRough"： "137934.72"、 "SalePlan"： "350万"、 "PlanFinish"： "14.73"、 "TonOilincome"： "95.47"、 "OilTransform"： "8.80"、 "アン"： " - 48.00" "ママ" " - 3.00"}、"SaleRough"： "68966.73"、 "SalePlan"： "220万"、 "PlanFinish"： "26.77"、 "TonOilincome"： "193.24"、 "OilTransform"： "11.29"、 "アン"： "30.00"、 "ママ"：" - 28.00 "}、 {"ランキング"：" 11" 、 "市"： "廊坊"、 "SaleIncome"： "515448.14"、 "SaleRough"： "137934.72"、 "SalePlan"： "350万"、」 PlanFinish "：" 14.73" 、 "TonOilincome"： "95.47"、 "OilTransform"： "8.80"、 "an"は" - 48.00"、 "ママ" " - 3.00"}、"SaleRough"： "68966.73"、 "SalePlan"： "220万"、 "PlanFinish"： "26.77"、 "TonOilincome"： "193.24"、 "OilTransform"： "11.29"、 "アン"： "30.00"、 "ママ"：" - 28.00 "}、 {"ランキング"：" 11" 、 "市"： "廊坊"、 "SaleIncome"： "515448.14"、 "SaleRough"： "137934.72"、 "SalePlan"： "350万"、」 PlanFinish "：" 14.73" 、 "TonOilincome"： "95.47"、 "OilTransform"： "8.80"、 "an"は" - 48.00"、 "ママ" " - 3.00"}、"OilTransform"： "11.29"、 "an"は"30.00"、 "ママ"： " - 28.00"}、 { "ランキング"： "11"、 "市"： "廊坊"、 "SaleIncome"： "515448.14" 、 "SaleRough"： "137934.72"、 "SalePlan"： "350万"、 "PlanFinish"： "14.73"、 "TonOilincome"： "95.47"、 "OilTransform"： "8.80"、 "アン"： " - 48.00"、 "ママ" " - 3.00"}、"OilTransform"： "11.29"、 "an"は"30.00"、 "ママ"： " - 28.00"}、 { "ランキング"： "11"、 "市"： "廊坊"、 "SaleIncome"： "515448.14" 、 "SaleRough"： "137934.72"、 "SalePlan"： "350万"、 "PlanFinish"： "14.73"、 "TonOilincome"： "95.47"、 "OilTransform"： "8.80"、 "アン"： " - 48.00"、 "ママ" " - 3.00"}、PlanFinish "：" 14.73" 、 "TonOilincome"： "95.47"、 "OilTransform"： "8.80"、 "an" は " - 48.00"、 "ママ" " - 3.00"}、PlanFinish "：" 14.73" 、 "TonOilincome"： "95.47"、 "OilTransform"： "8.80"、 "an" は " - 48.00"、 "ママ" " - 3.00"}、
{ "ランキング"： "12"、 "市"： "瑞州"、 "SaleIncome"： "399875.26"、 "SaleRough"： "85371.46"、 "SalePlan"： "2000000"、 "PlanFinish"： "19.99"、 "TonOilincome"： "114.42"、 "OilTransform"： "11.42"、 "an"は"128.00"、 "ママ"： " - 30.00"}、
{ "ランキング"： "13"、 "市"、「石家庄中油」、 "SaleIncome"： "90543.62"、 "SaleRough"： "20065.14"、 "SalePlan"： "430000"、 "PlanFinish"： "21.06"、 "TonOilincome"： "213.44"、 "OilTransform"： "20.45"、 "an"は" - 24.00"、 "ママ"： " - 17.00"}、
{ "ランキング"：」14" 、 "市"： "辛集中油"、 "SaleIncome"： "49255.52"、 "SaleRough"： "8743.12"、 "SalePlan"： "250000"、 "PlanFinish"： "19.70"、 "TonOilincome"： "202.67 」、 "OilTransform"： "29.95"、 "an"は"19.00"、 "ママ" " - 6.00"}、
{ "ランキング"： "15"、 "市"： "井陉中油"、 "SaleIncome"： "29682.60"、 "SaleRough"： "2175.66"、 "SalePlan"： "140000"、 "PlanFinish"： "21.20"、 "TonOilincome"： "730.20"、 "OilTransform"： "25.55"、 "アン"： " - 74.00" 、 "ママ"： " - 52.00"}、52" 、 "SaleRough"： "8743.12"、 "SalePlan"： "250000"、 "PlanFinish"： "19.70"、 "TonOilincome"： "202.67"、 "OilTransform"： "29.95"、 "an" は "19.00" "ママ" " - 6.00"}、 { "ランキング"： "15"、 "市"： "井陉中油"、 "SaleIncome"： "29682.60"、 "SaleRough"： "2175.66"、 "SalePlan"：」 140000" 、 "PlanFinish"： "21.20"、 "TonOilincome"： "730.20"、 "OilTransform"： "25.55"、 "アン"： " - 74.00"、 "ママ"： " - 52.00"}、52" 、 "SaleRough"： "8743.12"、 "SalePlan"： "250000"、 "PlanFinish"： "19.70"、 "TonOilincome"： "202.67"、 "OilTransform"： "29.95"、 "an" は "19.00" "ママ" " - 6.00"}、 { "ランキング"： "15"、 "市"： "井陉中油"、 "SaleIncome"： "29682.60"、 "SaleRough"： "2175.66"、 "SalePlan"：」 140000" 、 "PlanFinish"： "21.20"、 "TonOilincome"： "730.20"、 "OilTransform"： "25.55"、 "アン"： " - 74.00"、 "ママ"： " - 52.00"}、202.67" 、 "OilTransform"： "29.95"、 "an"は"19.00"、 "ママ" " - 6.00"は}、 { "ランキング"： "15"、 "市"： "井陉中油"、 "SaleIncome" ： "29682.60"、 "SaleRough"： "2175.66"、 "SalePlan"： "140000"、 "PlanFinish"： "21.20"、 "TonOilincome"： "730.20"、 "OilTransform"： "25.55"、 "アン"：」 -74.00" 、 "ママ"： " - 52.00"}、202.67" 、 "OilTransform"： "29.95"、 "an"は"19.00"、 "ママ" " - 6.00"は}、 { "ランキング"： "15"、 "市"： "井陉中油"、 "SaleIncome" ： "29682.60"、 "SaleRough"： "2175.66"、 "SalePlan"： "140000"、 "PlanFinish"： "21.20"、 "TonOilincome"： "730.20"、 "OilTransform"： "25.55"、 "アン"：」 -74.00" 、 "ママ"： " - 52.00"}、140000" 、 "PlanFinish"： "21.20"、 "TonOilincome"： "730.20"、 "OilTransform"： "25.55"、 "アン"： " - 74.00"、 "ママ"： " - 52.00"}、140000" 、 "PlanFinish"： "21.20"、 "TonOilincome"： "730.20"、 "OilTransform"： "25.55"、 "アン"： " - 74.00"、 "ママ"： " - 52.00"}、
{ "ランキング"： "16"、 "市"： "保定中油"、 "SaleIncome"： "11887.73"、 "SaleRough"： "2944.97"、 "SalePlan"： "100000"、 "PlanFinish"： "11.89"、 "TonOilincome"： "118.12"、 "OilTransform"： "34.16"、 "アン"： " - 64.00"、 "ママ"： " - 72.00"}]
$ .each（項目、関数（I、項目）{
STR = '<TR>' +
'<TD>' + item.Ranking + '</ TD>' +
'<TD>' + item.City + '</ TD>' +
'<TD>' +（+ item.SaleIncome / 10000）.toFixed（2）+ '</ TD>' +
'<TD>' +（+ item.An）.toFixed（2）+ '</ TD>' +
"<TD> [+（+ item.Mom）.toFixed（2）+ '</ TD>' +
'<TD>' +（item.SalePlan / 10000）.toFixed（2）+ '</ TD>' +
「<TD> '+（+ item.PlanFinish）.toFixed（2）+' </ TD> '+
'</ TR>'。$（ 'TBL-ボディTBODY'）APPEND（STR）;
$（ 'TBLヘッダTBODY。'）アペンド（STR）。
}）;IF（Items.length> 10）{
$（ 'TBL体TBODY '）。HTML（$（'。TBL体TBODY '）。HTML（）+ $（'。TBL体TBODY'）。HTML（ ））;
$（ 'TBL-体。 '）、CSS（'トップ'、 '0'）。
VAR tblTop = 0;
VAR speedhq = 50; //数值越大越慢
VAR outerHeight = $（ 'TBL-ボディTBODY。'）（ "TR"）を見つけるouterHeight（）。。。
機能Marqueehq（）{
IF（tblTop <= -outerHeight * Items.length）{
tblTop = 0。
{}他
tblTop - = 1;
}
$（ 'TBL-体。 '）、CSS（'上部'、tblTop + 'PX'）。
}MyMarhq =たsetInterval（Marqueehq、speedhq）。
//ホバーイベントがキャンセルされ
$ホバー（関数（）{（ "TBODYのTBL-ヘッダ"）
てclearInterval（MyMarhq）;
}、関数（）{
てclearInterval（MyMarhq）;
MyMarhq =たsetInterval（Marqueehq、speedhq）;
} ）}
レンダリング：
