您的位置：首页 > Web前端 > JavaScript

JavaScript表格排序（多列，不同数据类型）

2011-01-06 15:32 615 查看

<html>

<body>

<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,sDataType){

return function compareTRs(oTR1,oTR2){

var vValue1=convert(oTR1.cells[iCol].firstChild.nodeValue,sDataType);

var vValue2=convert(oTR2.cells[iCol].firstChild.nodeValue,sDataType);

if(vValue1<vValue2){

return -1;

}else if(vValue1>vValue2){

return 1;

}else{

return 0;

}

}

}

function sortTable(sTableID,iCol,sDataType){

var oTable=document.getElementById(sTableID);

var oTBody=oTable.tBodies[0];

var colDataRows=oTBody.rows;

var aTRs=new Array;

for(var i=0;i<colDataRows.length;i++){

aTRs[i]=colDataRows[i];

}

if (oTable.sortCol==iCol){

aTRs.reverse();

}else{

aTRs.sort(generateCompareTRs(iCol,sDataType));

}

var oFragment=document.createDocumentFragment();

for(var i=0;i<aTRs.length;i++){

oFragment.appendChild(aTRs[i]);

}

oTBody.appendChild(oFragment);

oTable.sortCol=iCol;

}

</script>

<table border="1" id="tblSort">

<thead>

<tr>

<th onclick="sortTable('tblSort',0)" style="cursor:pointer">Last Name</th>

<th onclick="sortTable('tblSort',1)" style="cursor:pointer">First Name</th>

<th onclick="sortTable('tblSort',2,'date')" style="cursor:pointer">Birthday</th>

<th onclick="sortTable('tblSort',3,'int')" style="cursor:pointer">Siblings</th>

</tr>

</thead>

<tbody>

<tr>

<td>Smith</td>

<td>John</td>

<td>7/12/1978</td>

<td>2</td>

</tr>

<tr>

<td>Johnson</td>

<td>Betty</td>

<td>10/15/1977</td>

<td>4</td>

</tr>

<tr>

<td>Henderson</td>

<td>Nathan</td>

<td>2/25/1949</td>

<td>1</td>

</tr>

<tr>

<td>Williams</td>

<td>James</td>

<td>7/8/1980</td>

<td>3</td>

</tr>

</tbody>

</table>

</body>

</html>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航