本文介绍如何在纯静态HTML页面中利用JavaScript实现表格数据的排序功能。通过引入外部JS脚本并刷新页面，即可对表格内容进行排序操作。文中提供了包含运行、复制及保存代码按钮的完整示例结构，适用于需要简单前端排序功能的场景。
静态HTML表格排序实现
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <title>无标题文档</title> <style> *{font-family:Arial, Helvetica, sans-serif;font-size:14px;border:none;} body{text-align:center;} table{margin:100px auto;} td{width:100px;height:24px;text-align:center;line-height:24px;border:1px solid silver;} .red{color:red;} .top{background:#CCCCCC;cursor:pointer;} .up{background:#FFFFCC url(/upload/20090211095733175.gif) no-repeat right 5px;} .down{background:#FFFFCC url(/upload/20090211095734843.gif) no-repeat right 5px;} .hov{background:#F0EFE5;} </style> </head> <body> <table cellpadding="0" id="table"> <tr class="top"><td>kick me</td><td >kick me</td><td>kick me</td><td>kick me</td></tr> <tr> <td><span id="bfn_la_bac.usa">15.43</span></td> <td class="red">700</td> <td>1.220</td> <td class="red">阿</td> </tr> <tr><td><span id="bfn_la_c.usa">7.05</span></td> <td class="red">4</td> <td>3,000</td> <td class="red">炳</td> </tr> <tr><td><span id="bfn_la_jpm.usa">30.62</span></td> <td class="red">30</td> <td>2,558,800</td> <td class="red">和</td> </tr> <tr> <td><span id="bfn_la_axp.usa">22.30</span></td> <td class="red">5</td><td>6</td> <td class="red">瞎</td> </tr> <tr><td><span id="bfn_la_mrk.usa">26.31</span></td> <td class="red">0.6</td><td>5</td> <td class="red">-</td> </tr> <tr><td><span id="bfn_la_pg.usa">63.16</span></td> <td class="red">7</td><td>4</td> <td class="red">子</td> </tr> </table> </body> </html> 注意：若需引入外部JavaScript文件，必须在引入后刷新页面，代码方可正常执行。