IDC资讯中心 <html>
<head>
<title>javascript实现客户端表格数据的排序</title>
<style type=”text/css”>
th{ cursor:pointer; color:#ffffff; background:#000066; height:20px; line-height:20px;border:#006699 1px solid;}
table{font-size:12px; border-collapse:collapse;}
td{ border:#006699 1px solid; padding-left:30px; height:18px; line-height:18px;}
.t1{text-decoration:underline;cursor:hand;}
</style>
<script type=”text/javascript”>
function convert(sValue,sDataType)
{
switch (sDataType)
{
case “int”:
return parseInt(sValue);
case “float”:
return parseFloat(sValue);
case “date”:
return new Date(Date.parse(sValue));
default:
return sValue.toString();
}
}
function generateCompareTRs(iCol,sDataValue)
{
return function compareTRs(oTR1,oTR2)
{
var sValue1=convert(oTR1.cells[iCol].firstChild.nodeValue,sDataValue);
var sValue2=convert(oTR2.cells[iCol].firstChild.nodeValue,sDataValue);
return sValue1.localeCompare(sValue2);
}
}
function sortTable(sTable,iCol,sDataValue)
{
var oTable=document.getElementById(sTable);
var oTBody=oTable.tBodies[0];
var colDataRows=oTBody.rows;
var aTRs=new Array;
for (i=0; i<colDataRows.length;i++)
{
aTRs[i]=colDataRows[i];
}
if(oTable.sortCol==iCol)
{
aTRs.reverse();
}
else
{
aTRs.sort(generateCompareTRs(iCol));
}
var oFragment = document.createDocumentFragment();
for(i=0;i<aTRs.length;i++)
{
oFragment.appendChild(aTRs[i]);
}
oTBody.appendChild(oFragment);
oTable.sortCol=iCol;
}
</script>
</head>
<body>
<table id=”a” width=”400px” align=”center”>
<thead>
<tr>
<th onClick=”sortTable(‘a’,0)”>姓名</th>
<th onClick=”sortTable(‘a’,1,’int’)”>体积</th>
<th onClick=”sortTable(‘a’,2,’date’)”>发布时间</th>
<th onClick=”sortTable(‘a’,3,’float’)”>数字</th>
</tr>
</thead>
<tbody>
<tr align=”left”>
<td class=”t1″ onclick=”window.open(‘http://www.aspprogram.cn’);”>asp编程网</td>
<td>22</td>
<td>1985-07-11</td>
<td>1.69</td>
</tr>
<tr align=”left”>
<td class=”t1″ onclick=”window.open(‘http://www.baidu.com’)”>百度</td>
<td>25</td>
<td>1982-11-24</td>
<td>1.60</td>
</tr>
<tr align=”left”>
<td class=”t1″ onclick=”window.open(‘http://www.google.cn’)”>google</td>
<td>23</td>
<td>1984-02-08</td>
<td>1.33</td>
</tr>
<tr align=”left”>
<td class=”t1″ onclick=”window.open(‘http://www.sina.com.cn’)”>新浪</a></td>
<td>27</td>
<td>1980-11-02</td>
<td>1.78</td>
</tr>
</tbody>
</table>
</body>
</html>
javascript实现客户端表格数据的排序
版权申明：本站文章部分自网络，如有侵权，请联系：west999com@outlook.com 特别注意：本站所有转载文章言论不代表本站观点！ 本站所提供的图片等素材，版权归原作者所有，如需使用，请与原作者联系。未经允许不得转载：IDC资讯中心 » javascript实现客户端表格数据的排序
