表格的排序和搜索

发表于 更新于 分类于

这两天学习了DOM的高级操作，主要是以对表格的一些排序和搜索处理为例子来进行学习的。

排序

表格的排序主要分为三个步骤:转换————排序————插入。
第一步，转换成数组。只有将获得的对象元素转换成数组才能进行大小的比较。

1
2
3
4
for(i=0;i<oTab.tBodies[0].rows.length;i++)
        {
            arr[i]=oTab.tBodies[0].rows[i];
        }

第二步，数组排序。这里是升序排列的。

1
2
3
arr.sort(function (tr1, tr2){
            return parseInt(tr1.cells[0].innerHTML)-parseInt(tr2.cells[0].innerHTML);
        });

第三步，重新插入。将排列好的数组插入到表格中。

1
2
3
4
for(i=0;i<arr.length;i++)
        {
          oTab.tBodies[0].appendChild(arr[i]);
        }

上述代码已经能实现将表格进行升序排列，若还想实现降序排列需要如下的改进。先创建一个布尔变量，当值为true时，进行升序排列，否则为降序排列。

1
var bAsc=true;//判断是否升序排列

然后，添加降序排列代码，就可以通过if-else语句判断是降序排列还是升序排列。

1
return parseInt(tr2.cells[0].innerHTML)-parseInt(tr1.cells[0].innerHTML);

最后，就是添加以下一行代码，就可以实现通过按钮的点击来交替实现两种排列方式。

1
bAsc=!bAsc;

搜索

表格的搜索是通过将文本框的字符串与表格指定位置的字符串进行比较，如果是相等的，则将那行的背景颜色变为黄色(也可以是其他颜色）。

1
2
3
4
5
6
7
8
9
10
11
12
for(i=0;i<oTab.tBodies[0].rows.length;i++)
{   //全部化成小写(大写也行)再比较，实现不区分大小写
  var sValueInTab=oTab.tBodies[0].rows[i].cells[1].innerHTML.toLowerCase();
  var sValueInTxt=oTxt.value.toLowerCase();
    if(sValueInTab==sValueInTxt)
    {
       oTab.tBodies[0].rows[i].style.background='yellow';
     }
     else
     {
       oTab.tBodies[0].rows[i].style.background='';
       }   }

但是如果想实现多关键词搜索，还需要做以下的改进，先将文本框的关键字用空格作为分割的标记对输入的关键字进行分割，然后利用search()方法去搜索，看看表格的字符串与文本框的字符串是否有一样的，如果搜索不到一样的字符串，则返回-1。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
var arr=sValueInTxt.split(' ');//将关键字分割
var bFound=false;
 for(j=0;j<arr.length;j++)
 {
   if(sValueInTab.search(arr[j])!=-1)
   {   //搜索不到
       bFound=true;
       break;
    }      }
  if(bFound)
   {
     oTab.tBodies[0].rows[i].style.background='yellow';
    }
   else
   {
    oTab.tBodies[0].rows[i].style.background='';
           }