<html  > 
<head  > 
<title  >  </title  > 
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" /  > 
</head  > 
<body  > 
<center  > 
<script type="text/javascript"  > function Search(Tbl,TextValue) 

alert("")
   var count=0; 
   var keyWord=TextValue.value; 
   var cellvalue=ddd.value    //.......................
   if(keyWord!="") 
   { 
     for(var i=0;i  <Tbl.rows.length;i++) 
     { 
        var tr=Tbl.rows[i]; 
//        if(tr.innerHTML.indexOf(keyWord)==-1) 
//          tr.style.display="none"; 
//        else 
//        { 
//          tr.style.display="block"; 
//          count++; 
//        } 
var tds=tr.childNodes
//alert(tds.length)
for(var j=0;j<tds.length;j++){
if(j != cellvalue){
if(tds[j].innerHTML.indexOf(keyWord)==-1) {
//alert(tds[j].innerHTML)
  tr.style.display="none"; 
}else { 
//alert(tds[j].innerHTML)
  tr.style.display="block"; 
  count++; 
  break;

}else{
//alert(tds[j].innerHTML)
tds[j].style.backgroundColor ="red"
}
}
     } 
   } 
   if(count==0) 
   { 
     alert(  '找不到?要的??!  '); 
     ListAll(Tbl); 
   } 
}
 
function ListAll(Tbl) 

  for(var i=0;i  <Tbl.rows.length;i++) 
  { 
    Tbl.rows[i].style.display="block"; 
  } 

</script> 
<input name="ttt" id="ttt" type="text" style="width:200"   > 
<input name="ddd" id="ddd" type="text" style="width:100"   > 
<input type="button" value="search找" onclick="Search(Tbl1,ttt)" id="btFind"  > 
<input type="button" value="返回" onclick="ListAll(Tbl1)"  id="btListAll"  > <br  > 
<table width="500" id="Tbl1" border="1"  > 
<tr  >  <td  >12  </td  >  <td  >34  </td  >  <td  >45  </td  >  <td  >45  </td  >  </tr  > 
<tr  >  <td  >呵呵  </td  >  <td  >56  </td  >  <td  >1911  </td  >  <td  >2  </td  >  </tr  > 
<tr  >  <td  >12  </td  >  <td  >55  </td  >  <td  >1920  </td  >  <td  >3  </td  >  </tr  > 
<tr  >  <td  >ddd  </td  >  <td  >12  </td  >  <td  >13  </td  >  <td  >2356  </td  >  </tr  > 
<tr  >  <td  >呵呵  </td  >  <td  >55  </td  >  <td  >1877  </td  >  <td  >rt  </td  >  </tr  > 
<tr  >  <td  >ddeed  </td  >  <td  >11  </td  >  <td  >12  </td  >  <td  >hh  </td  >  </tr  > 
<tr  >  <td  >ddafd  </td  >  <td  >58  </td  >  <td  >1988  </td  >  <td  >77  </td  >  </tr  > 
</table> 
</center> 
</body> 
</html>大概写的,没时间

解决方案 »

  1.   

    http://topic.csdn.net/u/20071008/10/92e3cff5-90bb-4664-8e03-d209bb5f14ee.html
    @_@是不是一样的东东
      

  2.   

    3楼的哥哥,可能是我没问明白.
    我的意思是--网页制作人员通过在代码中简单操作表头控制某列不参加过滤 (也就是像:不允许用户过滤哪列就在那列的表头中放入ture或false这样的东西,从而使用函数来控制),用户在页面上输入条件后过滤的是其余列中的单元格内容.
      

  3.   


    <html> 
    <head> 
    <title>  </title> 
    <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> 
    </head> 
    <body> 
    <center> 
    <script type="text/javascript"> 
    function search()
    {
    var keyWord = document.getElementById("ttt").value; //关键字

    var head = document.getElementById("Tbl1").tHead.rows[0];
    var bodyRows = document.getElementById("Tbl1").tBodies[0].rows;

    var searchCellIndexArray = new Array(); //要搜索的列的索引
    for (var i = 0; i < head.cells.length; i++)
    {
    if (head.cells[i].firstChild.checked)
    {
    searchCellIndexArray.push(i);
    }
    }


    for  (var i = 0; i < bodyRows.length; i++)
    {
    var currentRow = bodyRows[i];
    var show = false; //是否显示该行

    for (j = 0; j < searchCellIndexArray.length; j++)
    {
    if (currentRow.cells[searchCellIndexArray[j]].innerHTML.indexOf(keyWord) > -1) //关键字不存在,同隐藏该行
    {
    show = true;
    }
    }

    if (show)
    currentRow.style.display = "";
    else
    currentRow.style.display = "none";
    }
    }
    function back()
    {
    var bodyRows = document.getElementById("Tbl1").tBodies[0].rows;
    for (var i = 0; i < bodyRows.length; i++)
    {
    bodyRows[i].style.display = "";
    }
    }

    function heighLight(o)
    {
    var backgroundColor; //背景颜色
    if (o.checked)
    backgroundColor = "#eeeeee";
    else
    backgroundColor = "#ffffff";


    var cells = o.parentNode.parentNode.cells;

    //当前被选中的列index
    var columnIndex;

    for (var i = 0; i < cells.length; i++)
    {
    if (cells[i].firstChild == o)
    {
    columnIndex = i;
    break;
    }
    }

    var bodyRows = document.getElementById("Tbl1").tBodies[0].rows;

    for (var i = 0; i < bodyRows.length; i++)
    {
    bodyRows[i].cells[columnIndex].style.backgroundColor = backgroundColor;
    }
    } </script> 
    <input name="ttt" id="ttt" type="text" style="width:200" > 
    <input type="button" value="查找" onclick="search()" id="btFind"> 
    <input type="button" value="返回" onclick="back()"  id="btListAll">  <br> 
    <table width="500" id="Tbl1" border="1"> 
    <thead>
    <tr>
    <td><input type="checkbox" onclick="heighLight(this)" checked></td>
    <td><input type="checkbox" onclick="heighLight(this)" checked></td>
    <td><input type="checkbox" onclick="heighLight(this)" checked></td>
    <td><input type="checkbox" onclick="heighLight(this)" checked></td>  
    </tr>
    </thead>
    <tbody>
    <tr>  
    <td>12</td><td>34</td><td>45</td><td>45</td>  
    </tr> 
    <tr>
    <td>呵呵</td><td>56</td><td>1911</td><td>2</td>  
    </tr> 
    <tr>
    <td>12</td><td>55</td><td>1920</td><td>3</td>  
    </tr> 
    <tr>
    <td>ddd</td><td>12</td><td>13</td><td>2356</td>  
    </tr> 
    <tr>
    <td>呵呵</td><td>55</td><td>1877</td><td>rt</td>  
    </tr> 
    <tr>
    <td>ddeed</td><td>11</td><td>12</td><td>hh</td>  
    </tr> 
    <tr>
    <td>ddafd</td><td>58</td><td>1988</td><td>77</td>  
    </tr> 
    </tbody>
    </table> 

    </body> 
    </html>
      

  4.   

    楼上的哥哥 你的代码很漂亮,功能也很好.
    不过这样的话用户不是也能操作了么,你能再帮我修改一下吗?不要checkbox.让程序员能在代码中直接随便定义某列不参加过滤,用户只能按照程序员规定的去使用而不能规定哪列不参加过滤.谢谢啦~~~
      

  5.   

    在每个checkbox中添加一个属性disable,如:
    <input type="checkbox" onclick="heighLight(this)" disabled checked>
    如果不要选中,那么把 'checked' 去掉就可以了
      

  6.   

    <html><head>
    <base>
    <title></title>
    <meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
    <meta name="GENERATOR" content="Microsoft FrontPage 4.0">
    <meta name="ProgId" content="FrontPage.Editor.Document">
    </head><body><center>  
    <script type="text/javascript"  >  function Search(Tbl,TextValue)  
    {  
       var count=0;  
       var keyWord=TextValue.value;  
       var searchColumns=new Array();
      var options=cccccccc.options;
      for (var  i=0;i<options.length;i++){
        if(options[i].selected) searchColumns.push(options[i].value-1);
      }
      alert(searchColumns);
       if(keyWord!="")  
       {  
         var rows=Tbl.rows;  
         for(var i=0;i  <rows.length;i++)  
         {  
            var tr=rows[i];  
    var b=false;
            for(var j=0;j<searchColumns.length;j++){
             if(tr.cells[searchColumns[j]].innerHTML.indexOf(keyWord)>-1) {b=true;break}
            }
            if(b)  
              tr.style.display="";  
            else  
            {  
              tr.style.display="none";  
              count++;  
            }  
         }  
       }  
       if(count==0)  
       {  
         alert(  '找不到你要的记录!  ');  
         ListAll(Tbl);  
       }  

      
    function ListAll(Tbl)  
    {  
      for(var i=0;i  <Tbl.rows.length;i++)  
      {  
        Tbl.rows[i].style.display="block";  
      }  
    }  
    </script  >  

    <select size=4 multiple names=cccccccc id=cccccccc>
    <option value=1 selected >1</option>
    <option value=2 selected >2</option>
    <option value=3 selected >3</option>
    <option value=4 selected >4</option>
    </select>关键字
    <input name="ttt" id="ttt" type="text" style="width:200"> <br/><input type="button" value="查找" onclick="Search(Tbl1,ttt)" id="btFind"> 
    <input type="button" value="返回" onclick="ListAll(Tbl1)" id="btListAll"><br>
    <table width="500" id="Tbl1" border="1">
      <tr>
        <td>12</td>
        <td>34</td>
        <td>45</td>
        <td>45</td>
      </tr>
      <tr>
        <td>呵呵</td>
        <td>56</td>
        <td>1911</td>
        <td>2</td>
      </tr>
      <tr>
        <td>12</td>
        <td>55</td>
        <td>1920</td>
        <td>3</td>
      </tr>
      <tr>
        <td>ddd</td>
        <td>12</td>
        <td>13</td>
        <td>2356</td>
      </tr>
      <tr>
        <td>呵呵</td>
        <td>55</td>
        <td>1877</td>
        <td>rt</td>
      </tr>
      <tr>
        <td>ddeed</td>
        <td>11</td>
        <td>12</td>
        <td>hh</td>
      </tr>
      <tr>
        <td>ddafd</td>
        <td>58</td>
        <td>1988</td>
        <td>77</td>
      </tr>
    </table>
    </center></body></html>
      

  7.   

    谢谢 JGOOD 和JK_10000 
    JGOOD照你这么做虽然也可以,但是如果我这个表格有几十列甚至更多呢?每列都要这么做,到了需要控制其中某列不参加过滤的时候很容易混淆,然后设定错误。
    您看是不是可以把每列的首行设成表头,然后通过操作它来实现控制本列? 
    有这个表:
     食品  日用  化妆品 体育用品
     香肠  刷子  美白霜  篮球  
     大米  折凳  祛斑霜  足球
    其中:<td >食品</td> <td>日用</td><td>化妆品</td><td>体育用品</td>  让这行作为表头,先做个限制过滤列的function(),然后只需要在Html中把不允许过滤的<td>里面写上类似于“xxx=false”这样的东西,来实现这个要求呢?
    我对javascript不太熟悉,怎么写代码语法也是一塌糊涂,这次就是着急用,要不就慢慢学习了,还请你们帮帮忙~~谢谢!
      

  8.   

    不要急,慢慢来,心急吃不了热豆腐的。程序是一个细心活,错一个字符,整个应用程序都会运行不了
    你看看这样:把要搜索的列的列名放入一个数组,这个数组里表示的列是要搜索的。
    <html> 
    <head> 
    <title>  </title> 
    <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> 
    </head> 
        <body> 
        <center> 
        <script type="text/javascript"> 
    var showIndex = new Array("食品", "日用");  //要显示的列名

            function search()
            {
                var keyWord = document.getElementById("ttt").value;    //关键字
                
                var head = document.getElementById("Tbl1").tHead.rows[0];
                var bodyRows = document.getElementById("Tbl1").tBodies[0].rows;
                
                var searchCellIndexArray = new Array();    //要搜索的列的索引
                for (var i = 0; i < head.cells.length; i++)
                {
    for (var j = 0; j < showIndex.length; j++)
    {
                    if (head.cells[i].innerHTML.indexOf(showIndex[j]) > -1)
                    {
                        searchCellIndexArray.push(i);
    break;
                    }
    }
                }
                
    //高亮
                heightColumn(searchCellIndexArray);

                for  (var i = 0; i < bodyRows.length; i++)
                {
                    var currentRow = bodyRows[i];
                    var show = false;    //是否显示该行
                    
                    for (j = 0; j < searchCellIndexArray.length; j++)
                    {
                        if (currentRow.cells[searchCellIndexArray[j]].innerHTML.indexOf(keyWord) > -1)    //关键字不存在,同隐藏该行
                        {
                            show = true;
                        }
                    }
                    
                    if (show)
                        currentRow.style.display = "";
                    else
                        currentRow.style.display = "none";
                }
            }
                function back()
            {
                var bodyRows = document.getElementById("Tbl1").tBodies[0].rows;
                for (var i = 0; i < bodyRows.length; i++)
                {
                    bodyRows[i].style.display = "";
                }
            }
            
    //高亮显示
            function heightColumn(columnsIndex)
    {
    var bodyRows = document.getElementById("Tbl1").tBodies[0].rows;
    for (var i = 0; i < bodyRows.length; i++)
    {
    for (var j = 0; j < columnsIndex.length; j++)
    bodyRows[i].cells[columnsIndex[j]].style.backgroundColor = "#eeeeee";
    }
    }

        </script> 
        <input name="ttt" id="ttt" type="text" style="width:200" > 
        <input type="button" value="查找" onclick="search()" id="btFind"> 
        <input type="button" value="返回" onclick="back()"  id="btListAll">     <br> 
            <table width="500" id="Tbl1" border="1"> 
                <thead>
                    <tr>
                        <td>食品</td>
                        <td>日用</td>
    <td>化妆品</td>
    <td>体育用品</td>
                    </tr>
                </thead>
                <tbody>
                    <tr>  
                        <td>12</td><td>34</td><td>45</td><td>45</td>  
                    </tr> 
                    <tr>
                        <td>呵呵</td><td>56</td><td>1911</td><td>2</td>  
                    </tr> 
                    <tr>
                        <td>12</td><td>55</td><td>1920</td><td>3</td>  
                    </tr> 
                    <tr>
                        <td>ddd</td><td>12</td><td>13</td><td>2356</td>  
                    </tr> 
                    <tr>
                        <td>呵呵</td><td>55</td><td>1877</td><td>rt</td>  
                    </tr> 
                    <tr>
                        <td>ddeed</td><td>11</td><td>12</td><td>hh</td>  
                    </tr> 
                    <tr>
                        <td>ddafd</td><td>58</td><td>1988</td><td>77</td>  
                    </tr> 
                </tbody>
            </table> 
            
        </body> 
    </html>