表格大家都十分熟悉，如今的半铸钢钢性铸铁(铸造半钢)也使得表格的布局越来越光彩耀人。但是，无论如何，都掩饰不了那些包装下的死板。那么如何让那些死板的数据更具有可读性、可用性，能够让我们那些数据在"动"呢？下面我们使用jquery ajax来为表格注入些活力。主要实现的目的就是：将表格的列标题转化为按钮，点击不同的列标题，便按相应的列对数据进行排序。比如学生信息表，我点击"生日"列，这张表便按生日排序将结果呈现在我们面前。使用创建交互式、快速动态网页应用的网页开发技术来调用本页也避免了刷新页面所带来的折磨。下面我给出最基本的jsp页面

详细代码如下复制代码代码如下： %@页面语言=' Java '导入=' Java。乌提尔。*“页面编码=”ISO-8859-1“% %字符串路径=请求。getcontextpath()；字符串基本路径=请求。getscheme()' ://'请求。getservername()“:”请求。getserverport()“path ”/；% !DOCTYPE HTML PUBLIC '-//W3C//DTD HTML 4.01 Transitional//EN ' HTML头基href=' %=基路径% ' title my JSP '排序表。“JSP”起始页/title meta http-equiv=' pragma ' content=' no-cache ' meta http-equiv=' cache-control ' content=' no-cache ' meta http-equiv=' expires ' content=' 0 ' meta http-equiv='关键字' content='关键字1，关键字2，- link rel='样式表type=' text/CSS ' href=' style。CSS '-脚本类型=' text/JavaScript ' src=' http : js/jquery-1。4 .4 .js '/script/head body table class=' sort table ' style='底色：灰色；color : white ' TD tr th/th class=' sort-alpha ' title/th thAuthor/th thPublishDate/th thPrice/th/tr/the ad t body tr tdimg src=' http :%=path %/images/JavaScript。jpg ' width=' 40 ' height=' 50 ' alt=' JavaScript '/TD tdJavaScript/TD TD TD道格拉斯克洛克福特TD/2008年5月/TD TD $ 31.02/TD/tr tdimg src in Java/TD tdThinking in Java/TD tdBruce埃凯尔2006年年2月/TD $ 33.02/TD/tr tdimg src=' http :%=path %/images/jQuery。jpg ' width=' 40 ' height=' 50 ' alt=' jQuery in Action，第二版TD/TDjquery在运行，第二版TD/TDbear bibe ault/Yehuda Katz/TD/TD 2010年四月TD/TD TD 35.02美元/第一步：为表格添加奇偶行交替背景

复制代码代码如下：样式类型='text/css ' .偶数{底色： # E8A 824} .奇数{背景色-颜色： # 74411 b；}/样式第二步：按字母排序实现基于表格的标题列进行排序thclass='sort-alpha'Title/th为标题定义了一个排序类复制代码代码如下：脚本类型='text/javascript '语言='javascript' $(文档)。ready(function(){ var alternateRowColors=function($table){ $(' t body tr : odd '，$ table).removeClass(“”偶数')。addClass(')奇数');$('tbody tr:even '，$table).removeClass(“”奇数')。addClass(')偶数')};$(“表。排序表).每个(function(){ var $ table=$(this)；替代颜色(表格);$('th '，$table).每个（函数（列){ var $ header=$(this)；if($header.is ' .sort-alpha '){ $ header。addclass(')可点击')。悬停(函数(){ $ header。add class(' hover ')；}，function(){ $ header。移除类(“悬停”)；}).单击(function(){ var rows=$ table。查找(' tbodytr ').get()；rows.sort(函数(a，b){ var keyA=$(a)).儿童(' td ').eq(列)。文本()。toUpperCase()；var keyB=$(b).儿童(' td ').eq(列)。文本()。toUpperCase()；if(KeyKeyb)返回-1;if(KeyKeyb)返回1;返回0;});$.每一个（行，函数（索引，行){ $table.children('tbody ').追加（行);});替代颜色(表格);});} });});});/script最后当你点击标题时最终效果

其他类型的排序如下：