如何依次执行以下功能：1.放大-> 2.旋转360度-> 3.放大至放大前的尺寸-> 4.更改颜色（切换）

Question

这是一个演示。 如何依次执行以下功能：1.放大-> 2.旋转360度-> 3.放大至放大前的尺寸-> 4.更改颜色（切换）

 $(document).ready(function() { $('.tlist td div').click(function() { $(this).css("z-index", "1000").animate({ width: '+=90px', height: '+=90px', fontSize: '300%', zIndex: 1000 }, { step: function(now, fx) { $(this).css('-webkit-transform', 'rotate(360deg)'); }, duration: 'slow' }).animate({ width: '-=90px', height: '-=90px', fontSize: '120%', zIndex: 1 }).toggleClass('changeColor').css("z-index", "1"); }); }); 

 body { width: 1340px; text-align: center; } .tlist { display: inline; border-collapse: separate; border-spacing: 2px 7px; } #rightT { padding-left: 115px; } .tlist th { font-size: 160%; font-family: Sans-serif; } .tlist td { width: 56px; height: 54px; border: 1px solid lightgrey; } .tlist td div { position: absolute; border: 1px solid lightgrey; width: 45px; color: white; background-color: orange; font-family: arial; font-size: 120%; text-align: center; padding-top: 7px; padding-bottom: 11px; padding-left: 1px; padding-right: 1px; margin-top: -24px; margin-left: 3px; } .tlist td div.changeColor { color: black; background-color: white; border-color: red; } #left1, #left2, #left5, #left6, #left7, #left8, #left3, #left4 { text-align: right; } #right1, #right2, #right3, #right4, #right5, #right6, #right7, #right8 { text-align: left; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> <table id='leftT' class='tlist'> <tr> <th></th> <th id='a1'>1</th> <th id='a2'>2</th> <th id='a3'>3</th> <th id='a4'>4</th> <th id='a5'>5</th> <th id='a6'>6</th> <th id='a7'>7</th> <th id='a8'>8</th> </tr> <tr> <th id='left1'>15/F</th> <td id='f1501'> <div>1501</div> </td> <td id='f1502'> <div>1502</div> </td> <td id='f1503'> <div>1503</div> </td> <td id='f1504'> <div>1504</div> </td> <td id='f1505'> <div>1505</div> </td> <td id='f1506'> <div>1506</div> </td> <td id='f1507'> <div>1507</div> </td> <td id='f1508'> <div>1508</div> </td> <th id='right1'>15/F</th> </tr> <tr> <th></th> <td id='f1401'> <div>1401</div> </td> <td id='f1402'> <div>1402</div> </td> <td id='f1403'> <div>1403</div> </td> <td id='f1404'> <div>1404</div> </td> <td id='f1405'> <div>1405</div> </td> <td id='f1406'> <div>1406</div> </td> <td id='f1407'> <div>1407</div> </td> <td id='f1408'> <div>1408</div> </td> <th></th> </tr> <tr> <th></th> <td id='f1301'> <div>1301</div> </td> <td id='f1302'> <div>1302</div> </td> <td id='f1303'> <div>1303</div> </td> <td id='f1304'> <div>1304</div> </td> <td id='f1305'> <div>1305</div> </td> <td id='f1306'> <div>1306</div> </td> <td id='f1307'> <div>1307</div> </td> <td id='f1308'> <div>1308</div> </td> <th></th> </tr> <tr> <th></th> <td id='f1201'> <div>1201</div> </td> <td id='f1202'> <div>1202</div> </td> <td id='f1203'> <div>1203</div> </td> <td id='f1204'> <div>1204</div> </td> <td id='f1205'> <div>1205</div> </td> <td id='f1206'> <div>1206</div> </td> <td id='f1207'> <div>1207</div> </td> <td id='f1208'> <div>1208</div> </td> <th></th> </tr> <tr> <th></th> <td id='f1101'> <div>1101</div> </td> <td id='f1102'> <div>1102</div> </td> <td id='f1103'> <div>1103</div> </td> <td id='f1104'> <div>1104</div> </td> <td id='f1105'> <div>1105</div> </td> <td id='f1106'> <div>1106</div> </td> <td id='f1107'> <div>1107</div> </td> <td id='f1108'> <div>1108</div> </td> <th></th> </tr> <tr> <th id='left2'>10/F</th> <td id='f1001'> <div>1001</div> </td> <td id='f1002'> <div>1002</div> </td> <td id='f1003'> <div>1003</div> </td> <td id='f1004'> <div>1004</div> </td> <td id='f1005'> <div>1005</div> </td> <td id='f1006'> <div>1006</div> </td> <td id='f1007'> <div>1007</div> </td> <td id='f1008'> <div>1008</div> </td> <th id='right2'>10/F</th> </tr> <tr> <th></th> <td id='f901'> <div>901</div> </td> <td id='f902'> <div>902</div> </td> <td id='f903'> <div>903</div> </td> <td id='f904'> <div>904</div> </td> <td id='f905'> <div>905</div> </td> <td id='f906'> <div>906</div> </td> <td id='f907'> <div>907</div> </td> <td id='f908'> <div>908</div> </td> <th></th> </tr> <tr> <th></th> <td id='f801'> <div>801</div> </td> <td id='f802'> <div>802</div> </td> <td id='f803'> <div>803</div> </td> <td id='f804'> <div>804</div> </td> <td id='f805'> <div>805</div> </td> <td id='f806'> <div>806</div> </td> <td id='f807'> <div>807</div> </td> <td id='f808'> <div>808</div> </td> <th></th> </tr> <tr> <th></th> <td id='f701'> <div>701</div> </td> <td id='f702'> <div>702</div> </td> <td id='f703'> <div>703</div> </td> <td id='f704'> <div>704</div> </td> <td id='f705'> <div>705</div> </td> <td id='f706'> <div>706</div> </td> <td id='f707'> <div>707</div> </td> <td id='f708'> <div>708</div> </td> <th></th> </tr> <tr> <th></th> <td id='f601'> <div>601</div> </td> <td id='f602'> <div>602</div> </td> <td id='f603'> <div>603</div> </td> <td id='f604'> <div>604</div> </td> <td id='f605'> <div>605</div> </td> <td id='f606'> <div>606</div> </td> <td id='f607'> <div>607</div> </td> <td id='f608'> <div>608</div> </td> <th></th> </tr> <tr> <th id='left3'>5/F</th> <td id='f501'> <div>501</div> </td> <td id='f502'> <div>502</div> </td> <td id='f503'> <div>503</div> </td> <td id='f504'> <div>504</div> </td> <td id='f505'> <div>505</div> </td> <td id='f506'> <div>506</div> </td> <td id='f507'> <div>507</div> </td> <td id='f508'> <div>508</div> </td> <th id='right3'>5/F</th> </tr> <tr> <th></th> <td id='f401'> <div>401</div> </td> <td id='f402'> <div>402</div> </td> <td id='f403'> <div>403</div> </td> <td id='f404'> <div>404</div> </td> <td id='f405'> <div>405</div> </td> <td id='f406'> <div>406</div> </td> <td id='f407'> <div>407</div> </td> <td id='f408'> <div>408</div> </td> <th></th> </tr> <tr> <th></th> <td id='f301'> <div>301</div> </td> <td id='f302'> <div>302</div> </td> <td id='f303'> <div>303</div> </td> <td id='f304'> <div>304</div> </td> <td id='f305'> <div>305</div> </td> <td id='f306'> <div>306</div> </td> <td id='f307'> <div>307</div> </td> <td id='f308'> <div>308</div> </td> <th></th> </tr> <tr> <th></th> <td id='f201'> <div>201</div> </td> <td id='f202'> <div>202</div> </td> <td id='f203'> <div>203</div> </td> <td id='f204'> <div>204</div> </td> <td id='f205'> <div>205</div> </td> <td id='f206'> <div>206</div> </td> <td id='f207'> <div>207</div> </td> <td id='f208'> <div>208</div> </td> <th></th> </tr> <tr> <th id='left4'>1/F</th> <td id='f101'> <div>101</div> </td> <td id='f102'> <div>102</div> </td> <td id='f103'> <div>103</div> </td> <td id='f104'> <div>104</div> </td> <td id='f105'> <div>105</div> </td> <td id='f106'> <div>106</div> </td> <td id='f107'> <div>107</div> </td> <td id='f108'> <div>108</div> </td> <th id='right4'>1/F</th> </tr> </table> <!-- Table on Right --> <table id='rightT' class='tlist'> <tr> <th></th> <th id='b1'>1</th> <th id='b2'>2</th> <th id='b3'>3</th> <th id='b4'>4</th> <th id='b5'>5</th> <th id='b6'>6</th> <th id='b7'>7</th> <th id='b8'>8</th> </tr> <tr> <th id='left5'>30/F</th> <td id='f3001'> <div>3001</div> </td> <td id='f3002'> <div>3002</div> </td> <td id='f3003'> <div>3003</div> </td> <td id='f3004'> <div>3004</div> </td> <td id='f3005'> <div>3005</div> </td> <td id='f3006'> <div>3006</div> </td> <td id='f3007'> <div>3007</div> </td> <td id='f3008'> <div>3008</div> </td> <th id='right5'>30/F</th> </tr> <tr> <th></th> <td id='f2901'> <div>2901</div> </td> <td id='f2902'> <div>2902</div> </td> <td id='f2903'> <div>2903</div> </td> <td id='f2904'> <div>2904</div> </td> <td id='f2905'> <div>2905</div> </td> <td id='f2906'> <div>2906</div> </td> <td id='f2907'> <div>2907</div> </td> <td id='f2908'> <div>2908</div> </td> <th></th> </tr> <tr> <th></th> <td id='f2801'> <div>2801</div> </td> <td id='f2802'> <div>2802</div> </td> <td id='f2803'> <div>2803</div> </td> <td id='f2804'> <div>2804</div> </td> <td id='f2805'> <div>2805</div> </td> <td id='f2806'> <div>2806</div> </td> <td id='f2807'> <div>2807</div> </td> <td id='f2808'> <div>2808</div> </td> <th></th> </tr> <tr> <th></th> <td id='f2701'> <div>2701</div> </td> <td id='f2702'> <div>2702</div> </td> <td id='f2703'> <div>2703</div> </td> <td id='f2704'> <div>2704</div> </td> <td id='f2705'> <div>2705</div> </td> <td id='f2706'> <div>2706</div> </td> <td id='f2707'> <div>2707</div> </td> <td id='f2708'> <div>2708</div> </td> <th></th> </tr> <tr> <th></th> <td id='f2601'> <div>2601</div> </td> <td id='f2602'> <div style='background-color:white;color:black;'>2602</div> </td> <td id='f2603'> <div>2603</div> </td> <td id='f2604'> <div>2604</div> </td> <td id='f2605'> <div>2605</div> </td> <td id='f2606'> <div>2606</div> </td> <td id='f2607'> <div>2607</div> </td> <td id='f2608'> <div>2608</div> </td> <th></th> </tr> <tr> <th id='left6'>25/F</th> <td id='f2501'> <div>2501</div> </td> <td id='f2502'> <div>2502</div> </td> <td id='f2503'> <div>2503</div> </td> <td id='f2504'> <div>2504</div> </td> <td id='f2505'> <div>2505</div> </td> <td id='f2506'> <div>2506</div> </td> <td id='f2507'> <div>2507</div> </td> <td id='f2508'> <div>2508</div> </td> <th id='right6'>25/F</th> </tr> <tr> <th></th> <td id='f2401'> <div>2401</div> </td> <td id='f2402'> <div>2402</div> </td> <td id='f2403'> <div>2403</div> </td> <td id='f2404'> <div>2404</div> </td> <td id='f2405'> <div>2405</div> </td> <td id='f2406'> <div>2406</div> </td> <td id='f2407'> <div>2407</div> </td> <td id='f2408'> <div>2408</div> </td> <th></th> </tr> <tr> <th></th> <td id='f2301'> <div>2301</div> </td> <td id='f2302'> <div>2302</div> </td> <td id='f2303'> <div>2303</div> </td> <td id='f2304'> <div>2304</div> </td> <td id='f2305'> <div>2305</div> </td> <td id='f2306'> <div>2306</div> </td> <td id='f2307'> <div>2307</div> </td> <td id='f2308'> <div>2308</div> </td> <th></th> </tr> <tr> <th></th> <td id='f2201'> <div>2201</div> </td> <td id='f2202'> <div>2202</div> </td> <td id='f2203'> <div>2203</div> </td> <td id='f2204'> <div>2204</div> </td> <td id='f2205'> <div>2205</div> </td> <td id='f2206'> <div>2206</div> </td> <td id='f2207'> <div>2207</div> </td> <td id='f2208'> <div>2208</div> </td> <th></th> </tr> <tr> <th></th> <td id='f2101'> <div>2101</div> </td> <td id='f2102'> <div>2102</div> </td> <td id='f2103'> <div>2103</div> </td> <td id='f2104'> <div>2104</div> </td> <td id='f2105'> <div>2105</div> </td> <td id='f2106'> <div>2106</div> </td> <td id='f2107'> <div>2107</div> </td> <td id='f2108'> <div>2108</div> </td> <th></th> </tr> <tr> <th id='left7'>20/F</th> <td id='f2001'> <div>2001</div> </td> <td id='f2002'> <div>2002</div> </td> <td id='f2003'> <div>2003</div> </td> <td id='f2004'> <div>2004</div> </td> <td id='f2005'> <div>2005</div> </td> <td id='f2006'> <div>2006</div> </td> <td id='f2007'> <div>2007</div> </td> <td id='f2008'> <div>2008</div> </td> <th id='right7'>20/F</th> </tr> <tr> <th></th> <td id='f1901'> <div>1901</div> </td> <td id='f1902'> <div>1902</div> </td> <td id='f1903'> <div>1903</div> </td> <td id='f1904'> <div>1904</div> </td> <td id='f1905'> <div>1905</div> </td> <td id='f1906'> <div>1906</div> </td> <td id='f1907'> <div>1907</div> </td> <td id='f1908'> <div>1908</div> </td> <th></th> </tr> <tr> <th></th> <td id='f1801'> <div>1801</div> </td> <td id='f1802'> <div>1802</div> </td> <td id='f1803'> <div style='background-color:white;color:black;'>1803</div> </td> <td id='f1804'> <div>1804</div> </td> <td id='f1805'> <div>1805</div> </td> <td id='f1806'> <div>1806</div> </td> <td id='f1807'> <div>1807</div> </td> <td id='f1808'> <div>1808</div> </td> <th></th> </tr> <tr> <th></th> <td id='f1701'> <div>1701</div> </td> <td id='f1702'> <div>1702</div> </td> <td id='f1703'> <div>1703</div> </td> <td id='f1704'> <div>1704</div> </td> <td id='f1705'> <div>1705</div> </td> <td id='f1706'> <div>1706</div> </td> <td id='f1707'> <div>1707</div> </td> <td id='f1708'> <div>1708</div> </td> <th></th> </tr> <tr> <th id='left8'>16/F</th> <td id='f1601'> <div>1601</div> </td> <td id='f1602'> <div>1602</div> </td> <td id='f1603'> <div>1603</div> </td> <td id='f1604'> <div>1604</div> </td> <td id='f1605'> <div>1605</div> </td> <td id='f1606'> <div>1606</div> </td> <td id='f1607'> <div>1607</div> </td> <td id='f1608'> <div>1608</div> </td> <th id='right8'>16/F</th> </tr> </table> 

的jsfiddle

Answer 1

一种简单但最有效的方法是使用css 。

一个使用自己的小提琴的简单CSS解决方案。

根据评论更新了答案。

的jsfiddle

 $(document).ready(function() { $('.tlist td div').click(function() { var t = $(this) t.removeClass('changeStyle'); setTimeout(function() { t.addClass('changeStyle'); }, 10); }); }); 

 body { width: 1340px; text-align: center; } .tlist { display: inline; border-collapse: separate; border-spacing: 2px 7px; } #rightT { padding-left: 115px; } .tlist th { font-size: 160%; font-family: Sans-serif; } .tlist td { width: 56px; height: 54px; border: 1px solid lightgrey; } .tlist td div { position: absolute; border: 1px solid lightgrey; width: 45px; color: white; background-color: orange; font-family: arial; font-size: 120%; text-align: center; padding-top: 7px; padding-bottom: 11px; padding-left: 1px; padding-right: 1px; margin-top: -24px; margin-left: 3px; } .tlist td div.changeColor { color: black; background-color: white; border-color: red; } #left1, #left2, #left5, #left6, #left7, #left8, #left3, #left4 { text-align: right; } #right1, #right2, #right3, #right4, #right5, #right6, #right7, #right8 { text-align: left; } @keyframes styleIt { 0% {} 25% { transform: scale(1.5) rotate(0deg) } 70% { transform: scale(1.5) rotate(360deg); } 100% { transform: scale(1); color: black; background-color: white; border-color: red; } } .changeStyle { animation: styleIt 1s forwards; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <table id='leftT' class='tlist'> <tr> <th></th> <th id='a1'>1</th> <th id='a2'>2</th> <th id='a3'>3</th> <th id='a4'>4</th> <th id='a5'>5</th> <th id='a6'>6</th> <th id='a7'>7</th> <th id='a8'>8</th> </tr> <tr> <th id='left1'>15/F</th> <td id='f1501'> <div>1501</div> </td> <td id='f1502'> <div>1502</div> </td> <td id='f1503'> <div>1503</div> </td> <td id='f1504'> <div>1504</div> </td> <td id='f1505'> <div>1505</div> </td> <td id='f1506'> <div>1506</div> </td> <td id='f1507'> <div>1507</div> </td> <td id='f1508'> <div>1508</div> </td> <th id='right1'>15/F</th> </tr> <tr> <th></th> <td id='f1401'> <div>1401</div> </td> <td id='f1402'> <div>1402</div> </td> <td id='f1403'> <div>1403</div> </td> <td id='f1404'> <div>1404</div> </td> <td id='f1405'> <div>1405</div> </td> <td id='f1406'> <div>1406</div> </td> <td id='f1407'> <div>1407</div> </td> <td id='f1408'> <div>1408</div> </td> <th></th> </tr> <tr> <th></th> <td id='f1301'> <div>1301</div> </td> <td id='f1302'> <div>1302</div> </td> <td id='f1303'> <div>1303</div> </td> <td id='f1304'> <div>1304</div> </td> <td id='f1305'> <div>1305</div> </td> <td id='f1306'> <div>1306</div> </td> <td id='f1307'> <div>1307</div> </td> <td id='f1308'> <div>1308</div> </td> <th></th> </tr> <tr> <th></th> <td id='f1201'> <div>1201</div> </td> <td id='f1202'> <div>1202</div> </td> <td id='f1203'> <div>1203</div> </td> <td id='f1204'> <div>1204</div> </td> <td id='f1205'> <div>1205</div> </td> <td id='f1206'> <div>1206</div> </td> <td id='f1207'> <div>1207</div> </td> <td id='f1208'> <div>1208</div> </td> <th></th> </tr> <tr> <th></th> <td id='f1101'> <div>1101</div> </td> <td id='f1102'> <div>1102</div> </td> <td id='f1103'> <div>1103</div> </td> <td id='f1104'> <div>1104</div> </td> <td id='f1105'> <div>1105</div> </td> <td id='f1106'> <div>1106</div> </td> <td id='f1107'> <div>1107</div> </td> <td id='f1108'> <div>1108</div> </td> <th></th> </tr> <tr> <th id='left2'>10/F</th> <td id='f1001'> <div>1001</div> </td> <td id='f1002'> <div>1002</div> </td> <td id='f1003'> <div>1003</div> </td> <td id='f1004'> <div>1004</div> </td> <td id='f1005'> <div>1005</div> </td> <td id='f1006'> <div>1006</div> </td> <td id='f1007'> <div>1007</div> </td> <td id='f1008'> <div>1008</div> </td> <th id='right2'>10/F</th> </tr> <tr> <th></th> <td id='f901'> <div>901</div> </td> <td id='f902'> <div>902</div> </td> <td id='f903'> <div>903</div> </td> <td id='f904'> <div>904</div> </td> <td id='f905'> <div>905</div> </td> <td id='f906'> <div>906</div> </td> <td id='f907'> <div>907</div> </td> <td id='f908'> <div>908</div> </td> <th></th> </tr> <tr> <th></th> <td id='f801'> <div>801</div> </td> <td id='f802'> <div>802</div> </td> <td id='f803'> <div>803</div> </td> <td id='f804'> <div>804</div> </td> <td id='f805'> <div>805</div> </td> <td id='f806'> <div>806</div> </td> <td id='f807'> <div>807</div> </td> <td id='f808'> <div>808</div> </td> <th></th> </tr> <tr> <th></th> <td id='f701'> <div>701</div> </td> <td id='f702'> <div>702</div> </td> <td id='f703'> <div>703</div> </td> <td id='f704'> <div>704</div> </td> <td id='f705'> <div>705</div> </td> <td id='f706'> <div>706</div> </td> <td id='f707'> <div>707</div> </td> <td id='f708'> <div>708</div> </td> <th></th> </tr> <tr> <th></th> <td id='f601'> <div>601</div> </td> <td id='f602'> <div>602</div> </td> <td id='f603'> <div>603</div> </td> <td id='f604'> <div>604</div> </td> <td id='f605'> <div>605</div> </td> <td id='f606'> <div>606</div> </td> <td id='f607'> <div>607</div> </td> <td id='f608'> <div>608</div> </td> <th></th> </tr> <tr> <th id='left3'>5/F</th> <td id='f501'> <div>501</div> </td> <td id='f502'> <div>502</div> </td> <td id='f503'> <div>503</div> </td> <td id='f504'> <div>504</div> </td> <td id='f505'> <div>505</div> </td> <td id='f506'> <div>506</div> </td> <td id='f507'> <div>507</div> </td> <td id='f508'> <div>508</div> </td> <th id='right3'>5/F</th> </tr> <tr> <th></th> <td id='f401'> <div>401</div> </td> <td id='f402'> <div>402</div> </td> <td id='f403'> <div>403</div> </td> <td id='f404'> <div>404</div> </td> <td id='f405'> <div>405</div> </td> <td id='f406'> <div>406</div> </td> <td id='f407'> <div>407</div> </td> <td id='f408'> <div>408</div> </td> <th></th> </tr> <tr> <th></th> <td id='f301'> <div>301</div> </td> <td id='f302'> <div>302</div> </td> <td id='f303'> <div>303</div> </td> <td id='f304'> <div>304</div> </td> <td id='f305'> <div>305</div> </td> <td id='f306'> <div>306</div> </td> <td id='f307'> <div>307</div> </td> <td id='f308'> <div>308</div> </td> <th></th> </tr> <tr> <th></th> <td id='f201'> <div>201</div> </td> <td id='f202'> <div>202</div> </td> <td id='f203'> <div>203</div> </td> <td id='f204'> <div>204</div> </td> <td id='f205'> <div>205</div> </td> <td id='f206'> <div>206</div> </td> <td id='f207'> <div>207</div> </td> <td id='f208'> <div>208</div> </td> <th></th> </tr> <tr> <th id='left4'>1/F</th> <td id='f101'> <div>101</div> </td> <td id='f102'> <div>102</div> </td> <td id='f103'> <div>103</div> </td> <td id='f104'> <div>104</div> </td> <td id='f105'> <div>105</div> </td> <td id='f106'> <div>106</div> </td> <td id='f107'> <div>107</div> </td> <td id='f108'> <div>108</div> </td> <th id='right4'>1/F</th> </tr> </table> <!-- Table on Right --> <table id='rightT' class='tlist'> <tr> <th></th> <th id='b1'>1</th> <th id='b2'>2</th> <th id='b3'>3</th> <th id='b4'>4</th> <th id='b5'>5</th> <th id='b6'>6</th> <th id='b7'>7</th> <th id='b8'>8</th> </tr> <tr> <th id='left5'>30/F</th> <td id='f3001'> <div>3001</div> </td> <td id='f3002'> <div>3002</div> </td> <td id='f3003'> <div>3003</div> </td> <td id='f3004'> <div>3004</div> </td> <td id='f3005'> <div>3005</div> </td> <td id='f3006'> <div>3006</div> </td> <td id='f3007'> <div>3007</div> </td> <td id='f3008'> <div>3008</div> </td> <th id='right5'>30/F</th> </tr> <tr> <th></th> <td id='f2901'> <div>2901</div> </td> <td id='f2902'> <div>2902</div> </td> <td id='f2903'> <div>2903</div> </td> <td id='f2904'> <div>2904</div> </td> <td id='f2905'> <div>2905</div> </td> <td id='f2906'> <div>2906</div> </td> <td id='f2907'> <div>2907</div> </td> <td id='f2908'> <div>2908</div> </td> <th></th> </tr> <tr> <th></th> <td id='f2801'> <div>2801</div> </td> <td id='f2802'> <div>2802</div> </td> <td id='f2803'> <div>2803</div> </td> <td id='f2804'> <div>2804</div> </td> <td id='f2805'> <div>2805</div> </td> <td id='f2806'> <div>2806</div> </td> <td id='f2807'> <div>2807</div> </td> <td id='f2808'> <div>2808</div> </td> <th></th> </tr> <tr> <th></th> <td id='f2701'> <div>2701</div> </td> <td id='f2702'> <div>2702</div> </td> <td id='f2703'> <div>2703</div> </td> <td id='f2704'> <div>2704</div> </td> <td id='f2705'> <div>2705</div> </td> <td id='f2706'> <div>2706</div> </td> <td id='f2707'> <div>2707</div> </td> <td id='f2708'> <div>2708</div> </td> <th></th> </tr> <tr> <th></th> <td id='f2601'> <div>2601</div> </td> <td id='f2602'> <div style='background-color:white;color:black;'>2602</div> </td> <td id='f2603'> <div>2603</div> </td> <td id='f2604'> <div>2604</div> </td> <td id='f2605'> <div>2605</div> </td> <td id='f2606'> <div>2606</div> </td> <td id='f2607'> <div>2607</div> </td> <td id='f2608'> <div>2608</div> </td> <th></th> </tr> <tr> <th id='left6'>25/F</th> <td id='f2501'> <div>2501</div> </td> <td id='f2502'> <div>2502</div> </td> <td id='f2503'> <div>2503</div> </td> <td id='f2504'> <div>2504</div> </td> <td id='f2505'> <div>2505</div> </td> <td id='f2506'> <div>2506</div> </td> <td id='f2507'> <div>2507</div> </td> <td id='f2508'> <div>2508</div> </td> <th id='right6'>25/F</th> </tr> <tr> <th></th> <td id='f2401'> <div>2401</div> </td> <td id='f2402'> <div>2402</div> </td> <td id='f2403'> <div>2403</div> </td> <td id='f2404'> <div>2404</div> </td> <td id='f2405'> <div>2405</div> </td> <td id='f2406'> <div>2406</div> </td> <td id='f2407'> <div>2407</div> </td> <td id='f2408'> <div>2408</div> </td> <th></th> </tr> <tr> <th></th> <td id='f2301'> <div>2301</div> </td> <td id='f2302'> <div>2302</div> </td> <td id='f2303'> <div>2303</div> </td> <td id='f2304'> <div>2304</div> </td> <td id='f2305'> <div>2305</div> </td> <td id='f2306'> <div>2306</div> </td> <td id='f2307'> <div>2307</div> </td> <td id='f2308'> <div>2308</div> </td> <th></th> </tr> <tr> <th></th> <td id='f2201'> <div>2201</div> </td> <td id='f2202'> <div>2202</div> </td> <td id='f2203'> <div>2203</div> </td> <td id='f2204'> <div>2204</div> </td> <td id='f2205'> <div>2205</div> </td> <td id='f2206'> <div>2206</div> </td> <td id='f2207'> <div>2207</div> </td> <td id='f2208'> <div>2208</div> </td> <th></th> </tr> <tr> <th></th> <td id='f2101'> <div>2101</div> </td> <td id='f2102'> <div>2102</div> </td> <td id='f2103'> <div>2103</div> </td> <td id='f2104'> <div>2104</div> </td> <td id='f2105'> <div>2105</div> </td> <td id='f2106'> <div>2106</div> </td> <td id='f2107'> <div>2107</div> </td> <td id='f2108'> <div>2108</div> </td> <th></th> </tr> <tr> <th id='left7'>20/F</th> <td id='f2001'> <div>2001</div> </td> <td id='f2002'> <div>2002</div> </td> <td id='f2003'> <div>2003</div> </td> <td id='f2004'> <div>2004</div> </td> <td id='f2005'> <div>2005</div> </td> <td id='f2006'> <div>2006</div> </td> <td id='f2007'> <div>2007</div> </td> <td id='f2008'> <div>2008</div> </td> <th id='right7'>20/F</th> </tr> <tr> <th></th> <td id='f1901'> <div>1901</div> </td> <td id='f1902'> <div>1902</div> </td> <td id='f1903'> <div>1903</div> </td> <td id='f1904'> <div>1904</div> </td> <td id='f1905'> <div>1905</div> </td> <td id='f1906'> <div>1906</div> </td> <td id='f1907'> <div>1907</div> </td> <td id='f1908'> <div>1908</div> </td> <th></th> </tr> <tr> <th></th> <td id='f1801'> <div>1801</div> </td> <td id='f1802'> <div>1802</div> </td> <td id='f1803'> <div style='background-color:white;color:black;'>1803</div> </td> <td id='f1804'> <div>1804</div> </td> <td id='f1805'> <div>1805</div> </td> <td id='f1806'> <div>1806</div> </td> <td id='f1807'> <div>1807</div> </td> <td id='f1808'> <div>1808</div> </td> <th></th> </tr> <tr> <th></th> <td id='f1701'> <div>1701</div> </td> <td id='f1702'> <div>1702</div> </td> <td id='f1703'> <div>1703</div> </td> <td id='f1704'> <div>1704</div> </td> <td id='f1705'> <div>1705</div> </td> <td id='f1706'> <div>1706</div> </td> <td id='f1707'> <div>1707</div> </td> <td id='f1708'> <div>1708</div> </td> <th></th> </tr> <tr> <th id='left8'>16/F</th> <td id='f1601'> <div>1601</div> </td> <td id='f1602'> <div>1602</div> </td> <td id='f1603'> <div>1603</div> </td> <td id='f1604'> <div>1604</div> </td> <td id='f1605'> <div>1605</div> </td> <td id='f1606'> <div>1606</div> </td> <td id='f1607'> <div>1607</div> </td> <td id='f1608'> <div>1608</div> </td> <th id='right8'>16/F</th> </tr> </table> 

希望这对您有帮助，如果您想要jQuery解决方案，请一定要问。