首页 诗词 字典 板报 句子 名言 友答 励志 学校 网站地图
当前位置: 首页 > 教程频道 > 网站开发 > Web前端 >

jQuery 报表排序

2012-10-26 
jQuery 表格排序!DOCTYPE html PUBLIC -//W3C//DTD XHTML 1.0 Transitional//EN http://www.w3.org/TR

jQuery 表格排序

<!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=utf-8" /><title>javaScrip基于对象</title><style type="text/css"><!--.theadCss {color: #FFF;background-color: #000;}--></style><script language="javascript" src="js/jquery-1.4.1.js" type="text/javascript"></script><script language="javascript" type="text/javascript">$(document).ready(function(){//添加根据不同的列排序$("thead > tr >td").eq(0).click(function(){sortTable(0);});$("thead > tr >td").eq(1).click(function(){sortTable(1);});$("thead > tr >td").eq(2).click(function(){sortTable(2);});});function sortTable(indexs){//通过.get()  获取DOM元素(把jQuery 元素转换为DOM 元素) var rows = $("tbody>tr").get();//sort 排序rows = rows.sort(function(a,b){//排序不区分大小写var keyA = $(a).find("td").eq(indexs).text().toUpperCase();var keyB = $(b).find("td").eq(indexs).text().toUpperCase();if(keyA < keyB){return -1;}if(keyA > keyB){return 1;}return 0;});//全部重新从尾部插入,这里因为已存在就移动到尾部$.each(rows,function(index,row){$("table>tbody").append(row);});}</script></head><body><table ><!-- 这里用thead,tbody 是为了方便 使用选择器 -->  <thead class="theadCss">    <tr>      <td>标号</td>      <td>名称</td>      <td>备注</td>    </tr>  </thead>  <tbody>    <tr>      <td>4</td>      <td>doc</td>      <td>word</td>    </tr>    <tr>      <td>2</td>      <td>window</td>      <td>MicroSoft</td>    </tr>    <tr>      <td>3</td>      <td>kingsoft</td>      <td>wps</td>    </tr>    <tr>      <td>1</td>      <td>google</td>      <td>great</td>    </tr>    <tr>      <td>5</td>      <td>baidu</td>      <td>sb</td>    </tr>  </tbody></table></body></html>
?

热点排行