表格 DOM 操作

    window.onload = function() {
        var oTb = document.getElementById("tb1");

        //隔行变色
        for (var i = 0; i < oTb.tBodies[0].rows.length; i++) {
            oTb.tBodies[0].rows[i].style.background = i % 2 ? "#ccc" : "";
            oTb.tBodies[0].rows[i].index = i;

            oTb.tBodies[0].rows[i].onmouseover = function() {
                this.style.background = "red";
            };
            oTb.tBodies[0].rows[i].onmouseout = function() {
                this.style.background = this.index % 2 ? "#ccc" : "";;
            };
        }

        //增加删除行
        var btnAdd = document.getElementById("btnAdd");
        oTb.nowId = oTb.tBodies[0].rows.length + 1;
        btnAdd.onclick = function() {
            var oTr = document.createElement("tr");
            var oTd = null;

            oTd = document.createElement("td");
            oTd.innerHTML = oTb.nowId++;
            oTr.appendChild(oTd);

            oTd = document.createElement("td");
            oTd.innerHTML = txtAdd.value;
            oTr.appendChild(oTd);

            oTd = document.createElement("td");
            oA = document.createElement("a");
            oA.innerHTML = "删除";
            oA.href = "javascript:void(0)"
            oA.onclick = function() {
                oTb.tBodies[0].removeChild(this.parentNode.parentNode);
            };
            oTd.appendChild(oA);
            oTr.appendChild(oTd);

            oTb.tBodies[0].appendChild(oTr);
        };

        //搜索
        var btnSearch = document.getElementById("btnSearch");
        var txtSearch = document.getElementById("txtSearch");
        btnSearch.onclick = function() {
            for (var i = 0; i < oTb.tBodies[0].rows.length; i++) {
                var tbValue = oTb.tBodies[0].rows[i].cells[1].innerHTML.toLowerCase();
                var txtValue = txtSearch.value.toLowerCase();
                var arr = txtValue.split(' ');
                var bFound = false;
                for (var j = 0; j < arr.length; j++) {
                    if (tbValue.search(arr[j]) != -1) {
                        bFound = true;
                        break;
                    }
                }
                if (bFound)
                    oTb.tBodies[0].rows[i].style.background = "#234233";
            }
        };

        //排序
        var btnSort = document.getElementById("btnSort");

        //点击之后顺序逆序切换排序
        var isAsc = true;

        btnSort.onclick = function() {

            //1. 转换成数组
            var arr = [];
            for (var i = 0; i < oTb.tBodies[0].rows.length; i++) {
                arr[i] = oTb.tBodies[0].rows[i];
            }

            //2. 数组排序
            arr.sort(function(tr1, tr2) {
                return isAsc ?
                    parseInt(tr1.cells[0].innerHTML) - parseInt(tr2.cells[0].innerHTML) :
                    parseInt(tr2.cells[0].innerHTML) - parseInt(tr1.cells[0].innerHTML);
            });

            //3. 重新插入
            for (var i = 0; i < arr.length; i++) {
                oTb.tBodies[0].appendChild(arr[i]);
            }

            //取反
            isAsc = !isAsc;
        };
    };