使用JavaScript

Question

動態過濾HTML表格的行所以我有這個表：

<table border="1" align="center"> 
    <tr> 
     <td>Broj_pu</td> 
     <td>Naziv_pu</td> 
     <td>ID</td> 
     <td>Naselje</td> 
     <td>zupanija</td> 
    </tr> 
    <tr> 
     <td><input type="text" ID="broj_pu" onkeydown="Filter(document.getElementById('broj_pu').value,  'broj_pu')" /></td> 
     <td><input type="text" ID="naziv_pu" onkeydown="Filter(document.getElementById('naziv_pu').value, 'naziv_pu')" /></td> 
     <td><input type="text" ID="ID" onkeydown="Filter(document.getElementById('ID').value,   'ID')" /></td> 
     <td><input type="text" ID="naselje" onkeydown="Filter(document.getElementById('naselje').value,  'naselje')" /></td> 
     <td><input type="text" ID="zupanija" onkeydown="Filter(document.getElementById('zupanija').value, 'zupanija')" /></td>  
    </tr> 

    <tr class="row" ID="row_filter"> 
     <td>10000</td> 
     <td>Zagreb</td> 
     <td>1</td> 
     <td>Sljeme</td> 
     <td>ZAGREBACKA</td> 
    </tr> 

    <tr class="row" ID="row_filter"> 
     <td>10000</td> 
     <td>Zagreb</td> 
     <td>2</td> 
     <td>Zagreb-dio</td> 
     <td>ZAGREBACKA</td> 
    </tr> 
<!-- A lot of rows --> 
... 
</table> 

同時，我已經開始這個JavaScript：

<script type="text/javascript"> 
    function Filter(text, column_name){ 
     var x = document.getElementByClassName("row"); 
     var i = 0; 
     var y; 

     if (text != ""){ 
      switch (column_name){ 
       case "broj_pu": 
       for (i = 0; i < x.length; i++){ 
        y = x[i].getElementByTagName("td"); 
        if((y[0].value).match(text) == null){ 
         x[i].attributes(style) = "{display:none;}"; 
        } 
       } 
       break; 

       case "naziv_pu": 
        y = x[i].getElementByTagName("td"); 
        if((y[1].value).match(text) == null){ 
         x[i].attributes(style) = "{display:none;}"; 
        } 
       } 
       break; 

       case "ID": 
        y = x[i].getElementByTagName("td"); 
        if((y[2].value).match(text) == null){ 
         x[i].attributes(style) = "{display:none;}"; 
        } 
       } 
       break; 

       case "naselje": 
        y = x[i].getElementByTagName("td"); 
        if((y[3].value).match(text) == null){ 
         x[i].attributes(style) = "{display:none;}"; 
        } 
       } 
       break; 

       case "zupanija": 
        y = x[i].getElementByTagName("td"); 
        if((y[4].value).match(text) == null){ 
         x[i].attributes(style) = "{display:none;}"; 
        } 
       } 
       break; 
      } 
     } 
    } 
</script> 

現在，我需要過濾表作爲用戶向文本字段輸入字母，但我不知道如何在輸入數據時編輯顯示文檔。

人有一個想法？

EDIT1：

所以我編輯的腳本，但它似乎並沒有工作。我做錯了什麼？

Answer 1

這個問題是提醒我的Java腳本是如何討厭，沒有任何框架的支持:)

不過，我已經整理出了您的問題（在Firefox 10.0.2測試）。

支票jsfiddle

完全可行的解決方案，請記住這只是工作例如，您可能需要編寫ALL-瀏覽器兼容的腳本。

腳本：

var filters=['hide_broj_pu','hide_naziv_pu','hide_ID','hide_naselje','hide_zupanija']; 

function ExcludeRows(cls){ 

    var skipRows=[]; 

    for(i=0;i<filters.length;i++) 
     if(filters[i]!=cls) skipRows.push(filters[i]); 

    var pattern=skipRows.join('|') 

    return pattern; 
} 

function Filter(srcField){ 

    var node=srcField.parentNode; 

    var index=srcField.parentNode.cellIndex; 
    //all the DATA rows 

    var dataRows= document.getElementsByClassName("row"); 

    //ensure that dataRows do not have any filter class added already 
    var kids= dataRows.length; 

    var filter ='hide_'+srcField.id; 

    var pattern = ExcludeRows(filter); 

    var skipRow = new RegExp(pattern,"gi"); 

    var searchReg =new RegExp('^'+srcField.value,'gi'); 

    var replaceCls= new RegExp(filter,'gi'); 

    for(i=0; i< kids ; i++){ 
     //skip if already filter applied 

     if(dataRows[i].className.match(skipRow)) continue; 

     //now we know which column to search 
     //remove current filter 
     dataRows[i].className=dataRows[i].className.replace(replaceCls,''); 

     if(!dataRows[i].cells[index].innerHTML.trim().match(searchReg)) 
      dataRows[i].className=dataRows[i].className +' '+ filter; 

    } 



} 

HTML

<table border="1" align="center"> 
<tr><td>Broj_pu</td><td>Naziv_pu</td><td>ID</td><td>Naselje</td><td>zupanija</td></tr> 
<tr> 
<td><input type="text" ID="broj_pu" onkeydown="Filter(this)" /></td> 
<td><input type="text" ID="naziv_pu" onkeydown="Filter(this)" /></td> 
<td><input type="text" ID="ID"   onkeydown="Filter(this)" /></td> 
<td><input type="text" ID="naselje" onkeydown="Filter(this)" /></td> 
<td><input type="text" ID="zupanija" onkeydown="Filter(this)" /></td> 
</tr> 

<tr class="row" ><td>10000</td><td>Zagreb</td><td>1</td><td>Sljeme</td><td>ZAGREBACKA</td></tr> 
<tr class="row" ><td>10000</td><td>Zagreb</td><td>2</td><td>Zagreb-dio</td><td>ZAGREBACKA</td></tr> 
</table> 

CSS

.hide_broj_pu, 
.hide_naziv_pu, 
.hide_ID, 
.hide_naselje, 
.hide_zupanija 
{display:none}