Question

所以我有这张桌子：

<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-Browser标准的脚本。

<强>脚本：

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}

Answer 2

对于Javascript表搜索，请尝试：

<p>Search: <input type="text" id="searchTerm" onkeyup="doSearch()" /></p>

<table id="dataTable">

<script>
function doSearch() {
            var input, filter, found, table, tr, td, i, j;
            input = document.getElementById("searchTerm");
            filter = input.value.toUpperCase();
            table = document.getElementById("dataTable");
            tr = table.getElementsByTagName("tr");
            for (i = 0; i < tr.length; i++) {
                td = tr[i].getElementsByTagName("td");
                for (j = 0; j < td.length; j++) {
                    if (td[j].innerHTML.toUpperCase().indexOf(filter) > -1) {
                        found = true;
                    }
                }
                if (found) {
                    tr[i].style.display = "";
                    found = false;
                } else {
                    tr[i].style.display = "none";
                }
            }
        }
    </script>

使用JavaScript动态过滤HTML表的行

2 个答案: