<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>StripingTable</title>
<script src="jquery-1.2.1.js" type="text/javascript"></script>
<script src="jquery.tablesorter.js" type="text/javascript"></script>
<script type="text/javascript">
$(function(){
formatTable("tb");
});
//var sortCol;
var storeTable = {
sortCol:null,
storeTableByColIndex:function(sTableId,colIndex,sType){
var oTable = $("#" + sTableId);
var trList = oTable.find("tbody>tr");
var arrTr = trList.get();
if(storeTable.sortCol==colIndex){
arrTr.reverse();
}
else {
arrTr.sort(storeTable.generateCompareTrs(colIndex,sType));
}
oTable.find("tbody").html($(arrTr));
storeTable.sortCol = colIndex;
formatTable(sTableId);//格式化Table
},
convert:function(sValue,sDataType){
switch(sDataType)
{
case "int":
return parseInt(sValue,10);
break;
case "float":
return parseFloat(sValue);
break;
case "date":
return new Date(Date.parse(sValue));
break;
default:
return sValue.toString();
}
},
generateCompareTrs:function(iCol,sDataType){
return function compareTrs(oTr1,oTr2)
{
var vValue1 = storeTable.convert(oTr1.children[iCol].innerText,sDataType);
var vValue2 = storeTable.convert(oTr2.children[iCol].innerText,sDataType);
if(vValue1 < vValue2)
{
return -1;
}
else if(vValue1> vValue2)
{
return 1;
}
else
{
return 0;
}
}
}
}
function formatTable(sTableId){
$("#"+sTableId).find("tbody>tr").removeClass("alt");
$(".stripe tr").mouseover(function(){
$(this).addClass("over");}).mouseout(function(){
$(this).removeClass("over");});
$(".stripe tr:even").addClass("alt");
}
</script>
<style>
th {
cursor:hand;
background:#0066FF;
color:#FFFFFF;
line-height:20px;
height:30px;
}
td {
padding:6px 11px;
border-bottom:1px solid #95bce2;
vertical-align:top;
text-align:center;
}
td * {
padding:6px 11px;
}
tr.alt td {
background:#ecf6fc; /*这行将给所有的tr加上背景色*/
}
tr.over td {
background:#bcd4ec; /*这个将是鼠标高亮行的背景色*/
}
</style>
</head>
<body>
<div id="msg" >drag me!</div>
<table id="tb" class="stripe" width="50%" border="0" cellspacing="0" cellpadding="0">
<!--用class="stripe"来标识需要使用该效果的表格-->
<thead>
<tr>
<th onclick="storeTable.storeTableByColIndex('tb',0)">姓名</th>
<th onclick="storeTable.storeTableByColIndex('tb',1,'int')">年龄</th>
<th onclick="storeTable.storeTableByColIndex('tb',2,'int')">QQ</th>
<th onclick="storeTable.storeTableByColIndex('tb',3,'date')">Email</th>
</tr>
</thead>
<tbody>
<tr>
<td>邓国梁1</td>
<td>23</td>
<td>31540201</td>
<td>2007/1/1</td>
</tr>
<tr>
<td>邓国梁1</td>
<td>2</td>
<td>31540201</td>
<td>2007/1/2</td>
</tr>
<tr>
<td>邓国梁3</td>
<td>20</td>
<td>31540203</td>
<td>2007/4/1</td>
</tr>
<tr>
<td>邓国梁4</td>
<td>190</td>
<td>31540204</td>
<td>2007/3/1</td>
</tr>
<tr>
<td>邓国梁4</td>
<td>100</td>
<td>31540204</td>
<td>2007/5/1</td>
</tr>
</tbody>
</table>
</body>
</html>