動的だから私は、このテーブルを持っている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答えはjQueryのを含めることができ

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