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

最新推荐文章于 2021-11-05 17:22:47 发布

老干妈麻里酱

最新推荐文章于 2021-11-05 17:22:47 发布

阅读量391

点赞数

分类专栏： JavaScript

本文链接：https://blog.csdn.net/Mary_Jane/article/details/42242591

版权

JavaScript 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

在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" οnclick="sortTable(0)" value="按序号降序排序"/>
    <input type="button" οnclick="sortTable(1)" value="按姓名升序排序"/>

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

至此我还有两个疑问：

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

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

老干妈麻里酱

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
JavaScript学习笔记(1)——一个表格排序的例子

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

扫一扫