5.动态表格排序
对从输入库查询出的表格结果进行页面动态排序,方法:
var tmptables = document.all.tags("table");

for (var i=0;i<tmptables.length;i++)  //遍历所有的页面表格
if (tmptables[i].sortable)  //判断标志位是否需要排序
attachTable(tmptables[i])

var sortLine,sortCol;

function tableToArray(tmptable)
{
var result = new Array();
if (tmptable.tHead == null)
{
for (var i=tmptable.firstChild.children.length-1;i>sortLine;i--)
{
var tmptr = tmptable.firstChild.children[i];//如果不存在thead的话就把tbody中在sortLine行之下的行排序
result[result.length] = tmptr.cloneNode(true);
}
}
else
{
for (var i=tmptable.children[1].children.length-1;i>-1;i--)
{
var tmptr =tmptable.children[1].children[i]; //如果存在thead的话则默认把tbody中的全部行排序
result[result.length] = tmptr.cloneNode(true);
}
}
return result;
}

function parseDate(datestring){
return new Date(datestring);
}

function sortArrayFloat(arg1,arg2) //根据指定的列按浮点数排序
{
if (parseFloat(arg1.children[sortCol].innerText) > parseFloat(arg2.children[sortCol].innerText)) return 1
else return -1
}
function sortArrayString(arg1,arg2) //根据指定的列按串排序
{
if (arg1.children[sortCol].innerText>arg2.children[sortCol].innerText) return 1
else return -1
}

function sortArrayDate(arg1,arg2) //根据指定的列按串排序
{
if (parseDate(arg1.children[sortCol].innerText) > parseDate(arg2.children[sortCol].innerText)) return 1
else return -1
}

function arrayToTable(ar,tmptable)
{
if (tmptable.tHead == null)
{
tmptbody = tmptable.firstChild;//如果不存在thead的话就把tbody中在sortLine行之下的行排序
for (var i=tmptbody.children.length-1;i>sortLine;i--)
{
var tmptr =tmptbody.children[i];
for (var j=0;j<tmptr.children.length;j++ )
{
tmptr.children[j].innerHTML = ar[tmptbody.children.length-i-1].children[j].innerHTML
}
}
}
else
{
tmptbody = tmptable.children[1];
for (var i=tmptbody.children.length-1;i>-1;i--)
{
var tmptr =tmptbody.children[i];
for (var j=0;j<tmptr.children.length;j++ )
{
tmptr.children[j].innerHTML = ar[tmptbody.children.length-i-1].children[j].innerHTML
}
}
}
}

function sortTable()
{

var elm = event.srcElement;  //获取触发事件的对象
var tmptr = elm.parentNode;  //获取文档层次中的父对象
tmptable = tmptr.parentNode.parentNode;  //获得需要排序的表格

for (var i=0;i<tmptr.children.length; i++){  //遍历列,找出是哪一列需要排序
if (tmptr.children[i] == elm )
break
}

sortCol = i;//获得被点击的列
sortLine = tmptable.sortLine;//获得被点击的行
var ar = tableToArray(tmptable);//把行转换为数组
if (elm.sortType == "float")
ar.sort(sortArrayFloat);//排序
else
ar.sort(sortArrayString);//排序

if (elm.reverse == true)
{
elm.reverse = false;
ar.reverse();
}
else
{
elm.reverse = true;
}
arrayToTable(ar,tmptable);
}

function attachTable(tmptable)
// 为一个表格的一行添加事件
{
var line = 0;
//遍历需要排序的表的每一行,检查标志位,是否为表头元素
for (var i=0;i<tmptable.firstChild.children.length ; i++)
if (tmptable.firstChild.children[i].sortLine)
line = i ;

var tds = tmptable.firstChild.children[line].children; //获得该表格表头元素的td标签对象集
for (var i=0;i<tds.length;i++){
tds[i].attachEvent("onclick",sortTable);  //添加事件
tds[i].style.cursor="hand";  //设置鼠标形状
tds[i].style.fontWeight="bold"  //设置字体
}
tmptable.sortLine=line;
}

缺点:如果表格中出现有checkbox, select, radiobox这样的互动元素则无法对这些元素进行排序或对其他的值列进行排序时会导致这些元素的值丢失