`

javascript table 排序

阅读更多
来自 javasscript 高级设计书中
主要是使用了 Array 数组的 sort方法 函数内传入函数
dataType 可以 设置,这个比较简单 使用 localeCompare 函数比较
学习这个用于修改 jquery flexigrid 使用 前端排序

<html>
<head>
<title>mutiple table sorting</title>
<script type="text/javascript">
function generateCompareTRs(iCol){
return function compareTRs(oTR1,oTR2){
var sValue1 = oTR1.cells[iCol].firstChild.nodeValue;
var sValue2 = oTR2.cells[iCol].firstChild.nodeValue;
return sValue1.localeCompare(sValue2);
};

}
function sortTable(sTableID,iCol){
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.push(colDataRows[i]);
if(oTable.sortCol ==iCol)
aTRs.reverse();
else
aTRs.sort(generateCompareTRs(iCol));

var oFragment = document.createDocumentFragment();
for(var i = 0;i<aTRs.length;i++)
oFragment.appendChild(aTRs[i]);
oTBody.appendChild(oFragment);
oTable.sortCol = iCol;
}
</script>
<table id="tblSort" border="1">
<tHead>
<tr><th onclick="sortTable('tblSort',0)" style="cursor:pointer">no</th><th onclick="sortTable('tblSort',1)" style="cursor:pointer">information</th></tr>
</tHead>
<tBody>
<tr><td>1</td><td>mo</td></tr>
<tr><td>2</td><td>aaa</td></tr>
<tr><td>3</td><td>cc</td></tr>
<tr><td>4</td><td>dddd</td></tr>
<tr><td>5</td><td>jianpo</td></tr>
<tr><td>6</td><td>ffff</td></tr>
</tBody>
</table>
</head>
</html>
分享到:
评论

相关推荐

Global site tag (gtag.js) - Google Analytics