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>

[Ctrl+A 全选注:引入外部Js需再刷新一下页面才能执行]

以上就是js 静态HTML表格排序功能实现的详细内容，更多请关注0133技术站其它相关文章！