javascript表格查询

< html  >    
< head  >    
< title  >     </ title  >    
< meta  http-equiv ="Content-Type"  content ="text/html; charset=gb2312"  /  >    
</ head  >    
   

< script  language ="javaScript"   > ...   
var g_SelectColor = "cyan";  //高亮显示颜色 
var g_SelectCells = [];      //选择列index集合
var g_TableOuterHTML = "";   //table 的 outerHTML

Array.prototype.contains = function(o)  
...{ //判断数组arr中是否含有元素o
      var flag = false;
      for(var i=0;i<this.length;i++)
      ...{
         if(this[i]==o) 
         ...{
            flag = true;
            break;
         }
         
      }
      return flag;
}

function $(id)
...{//取得对象
    return document.getElementById(id)
}

function init(objTable)
...{//初始化table事件
    g_TableOuterHTML = objTable.outerHTML;
    objTable.onclick = function()
    ...{
        var objE = event.srcElement;
        if(objE.tagName=="TD")
        ...{
            var iCell = objE.cellIndex;
            with(objTable)
            ...{
                g_SelectCells.contains(iCell)?g_SelectCells.pop(iCell):g_SelectCells.push(iCell);
                for(var i=0;i<rows.length;i++)
                ...{
                    with(rows[i].cells[iCell])
                    ...{
                        if(bgColor=="")
                        ...{
                            bgColor=g_SelectColor;
                            
                        }else
                        ...{
                            bgColor="";
                        }
                    }//end with
                }// end for
            }// end with
           
        }//end if
           
    }
 
}

function Search(table,str)
...{//查询
    var dis = "";
    for(var i=0;i<table.rows.length;i++)
    ...{
        for(var j=0;j<g_SelectCells.length;j++)
        ...{
            if(table.rows[i].cells[g_SelectCells[j]].innerText.indexOf(str)>-1)
            ...{
                dis = "block";
                break;
            }
            dis = "none";
        }
        table.rows[i].style.display=dis;
    }
}

function Reset(objTable)
...{//重置table
    objTable.outerHTML = g_TableOuterHTML;
}

</ script  >  
< body  onload ="init($('Tbl1'))" >    
< center  >
< input  id ="condtext"   type ="text"  style ="width:200"   >    
< input  type ="button"  value ="查找"  onclick ="Search($('Tbl1'),$('condtext').value)"    >    
< input  type ="button"  value ="返回"  onclick ="Reset($('Tbl1'))"    >  
< br >    
< table   width ="500"  id ="Tbl1"  border ="1"   >    
< tr  >    < td  > 1  </ td  >    < td  > a  </ td  >    < td  > 7  </ td  >    </ tr  >  
< tr  >    < td  > 2  </ td  >    < td  > b  </ td  >    < td  > 6  </ td  >    </ tr  >  
< tr  >    < td  > 3  </ td  >    < td  > c  </ td  >    < td  > 5  </ td  >    </ tr  >  
< tr  >    < td  > 4  </ td  >    < td  > d  </ td  >    < td  > 4  </ td  >    </ tr  >  
< tr  >    < td  > 5  </ td  >    < td  > e  </ td  >    < td  > 3  </ td  >    </ tr  >  
< tr  >    < td  > 6  </ td  >    < td  > f  </ td  >    < td  > 2  </ td  >    </ tr  >  
< tr  >    < td  > 7  </ td  >    < td  > g  </ td  >    < td  > 1  </ td  >    </ tr  >     
</ table  >    
</ center  >    
</ body  >   

</ html  >