表格应用相关----增删改查功能

1、表格的增加功能

对于增加整行及删除整行功能，首先增加的话需要创建元素，然后推入，

var oTr = document.createElement('tr');
var oTd = document.createElement('td');
oTd.innerHTML = oTab.tBodies[0].rows.length+1;
oTr.appendChild(oTd);

此时，按行的舒朗增加会出现一个问题，当点击删除后，序号会出现重复，不能保证数据的唯一性，应将行数保存为变量，然后使用，即：

var num = oTab.tBodies[0].rows.length+1;  
oTd.innerHTML = num++;

这样就可以解决了。

2、搜索功能

合理使用，tBodies，rows，cells，这样方便对DOM操作，搜索功能要记得大小写转换也可以搜索，将取得的值保存为变量，

var sTab = oTab.tBodies[0].rows[i].cells[1].innerHTML;  
var sTxt = oName.value

对变量进行大写或者小写转变后比较。

3、模糊搜索功能

模糊搜索原理：通过search（‘搜索内容’）找到并返回字符串出现的位置，如果没有找到则返回-1

var sTab = oTab.tBodies[0].rows[i].cells[1].innerHTML.toLowerCase();  
var sTxt = oName.value.toLowerCase()  
if (sTab.search(sTxt) != -1) {  
                   代码块  
 }

4、多关键词搜索

原理：通过字符串分割形成数组来实现，通过循环数组匹配查找来实现

for(var i=0;i<oTab.tBodies[0].rows.length;i++){  
       var sTab = oTab.tBodies[0].rows[i].cells[1].innerHTML.toLowerCase();  
        var sTxt = oName.value.toLowerCase();  
         var arr = sTxt.split(' ');  
           oTab.tBodies[0].rows[i].style.background="";  
           for(var j=0;j<arr.length;j++) {  
                    if (sTab.search(arr[j]) != -1) {  
                        oTab.tBodies[0].rows[i].style.background="red"  
                    }  
                }  
            }

5、筛选

原理：通过高亮显示效果，不同的是将background改为display，通过display来控制显示隐藏。

oTab.tBodies[0].rows[i].style.display="none";

6、排序

appendChild（）的原理：

1、先将元素从原有父级上删除

2、添加到新的父级上

排序的原理就是根据从小到大的顺序重新appendChild()一遍就好了；

首先将数据转为数组，

var arr = [];  
for(var i=0;i<oTab.tBodies[0].rows.length;i++){  
                arr[i]=oTab.tBodies[0].rows[i]  
            }

然后将数据进行排序，使用数组排序；

arr.sort(function(td1,td2){  
                var min = parseInt(td1.cells[0].innerHTML);  
                var max = parseInt(td2.cells[0].innerHTML);  
                return min-max  
            })

然后将排序后的数组appendChild()里面，

for(var i=0;i<arr.length;i++){  
                oTab.tBodies[0].appendChild(arr[i])  
            }