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

JavaScript学习笔记(1)——一个表格排序的例子

2014-12-29 20:02 429 查看

在Web程序中，当用户要求为取得的数据表单作排序后再输出时，我们的一个解决方案可以是向数据库发送请求要求其返回经过排序后的数据，但这样做无疑占用了较多的资源。于是我们利用JavaScript语句中Array类的sort方法来在客户端对数据进行排序。

设有如下一个表格：

<table border="1" id="tblSort">
<thead>
<tr>
<th>序号</th>
<th>姓名</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>王明</td>
</tr>
<tr>
<td>12</td>
<td>超人</td>
</tr>
<tr>
<td>3</td>
<td>张三</td>
</tr>
<tr>
<td>4</td>
<td>李四</td>
</tr>
</tbody>
</table>

然后让我们给出一个比较函数，它的原理和作用会在接下来的排序函数中说明：

function generateCompareTRs(iCol)//一个“根据传入的参数来决定排序函数”的函数
{
return function compare(tr1,tr2)//比较函数
{
var v1=tr1.cells[iCol].firstChild.nodeValue;//获得上一个单元格的值（？）
var v2=tr2.cells[iCol].firstChild.nodeValue;//获得下一个单元格的值（？）
if(iCol==0)
{
if(parseInt(v1)>parseInt(v2))
return -1;
else if(parseInt(v1)<parseInt(v2))
return 1;
else
return 0;
}
else
{
if(v1>v2)
return 1;
else if(v1<v2)
return -1;
else
return 0;
}
};
}

接下来我们给出排序函数：

function sortTable(iCol)//排序函数
{
var oTable=document.getElementById("tblSort");//获得等待排序的表格
var oTBody=oTable.tBodies[0];//得到<tbody>标签对象
var aRows=oTBody.rows;//得到表格体的行对象
var aTRs=new Array;//创建一个Array对象用于保存读入的行并对其进行排序
for(var i=0;i<aRows.length;i++)//循环将行对象压入刚刚创建的Array对象中
{
aTRs.push(aRows[i]);
}
aTRs.sort(generateCompareTRs(iCol));
/*
利用Array对象的sort()方法对行中的对象进行排序
sort()方法可以不带有参数值，当不带参数值时,sort()方法会将数组中的数据按字符串排序规则进行排序
当带参数值时，参数值为一比较函数， 该函数必须返回下列值之一：
如果所传递的第一个参数小于第二个参数，则返回负值。
如果两个参数相等，则返回零。
如果第一个参数大于第二个参数，则返回正值。
*/
var oFragment=document.createDocumentFragment();//创建一个文档碎片对象
for(var i=0;i<aTRs.length;i++)//循环将排序之后的行对象依次加入到文档碎片中
{
oFragment.appendChild(aTRs[i]);
};
oTBody.appendChild(oFragment);
//一次过将文档碎片中的行对象通过文档碎片输出到表格体当中，比起循环依次将行对象输出到表格体，这么做的话运行效率会显著提升
}

这里的一个关键知识点就是JavaScript中Array对象sort方法的使用，如果看过上面代码中的注释之后还不清楚的，可以参考这里：

sort 方法 (Array) (JavaScript)

最后，再在JSP页面<body>标签中加上两个按钮：

<input type="button" onclick="sortTable(0)" value="按序号降序排序"/>
<input type="button" onclick="sortTable(1)" value="按姓名升序排序"/>

我们这次的任务就大致完成了，要想实现按序号升序排序和按姓名降序排序的功能，只要修改相应代码即可。

至此我还有两个疑问：

1.在比较函数generateCompareTRs()中注释打问号的部分我尚不理解

2.Array.sort()在对字符串进行排序时，所依据的规则是什么？(已解决，依据的是字符所对应的ASCII值的大小)

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

标签：

相关文章推荐

新的分享

章节导航