使用JavaScript动态筛选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>

普氏兄弟
纳齐夫乌普
身份证件
纳塞尔耶
祖帕尼加
10000
萨格勒布
1.
斯莱杰姆
扎格雷巴卡
10000
萨格勒布
2.
萨格勒布迪奥酒店
扎格雷巴卡
...

我还启动了这个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>

函数过滤器（文本、列名称）{
var x=document.getElementByClassName（“行”）；
var i=0；
变量y；
如果（文本！=“”）{
开关（列名称）{
案例“broj_pu”：
对于（i=0；i

现在，当用户向文本字段输入字母时，我需要过滤表格，但我不知道如何在输入数据时编辑显示文档

有人有主意吗

编辑1：

---

所以我编辑了脚本，但它似乎不起作用。我做错了什么？

这个问题提醒我，没有任何框架支持，java脚本是多么糟糕：）

不过，我已经为您解决了这个问题（在firefox 10.0.2上进行了测试）

检查上的完整工作解决方案

请记住，这只是一个工作示例，您可能需要编写所有与浏览器兼容的脚本

脚本：

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;

    }



}

---

对于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>

搜索：

函数doSearch（）{
var输入，过滤器，发现，表格，tr，td，i，j；
输入=document.getElementById（“searchTerm”）；
filter=input.value.toUpperCase（）；
table=document.getElementById（“dataTable”）；
tr=table.getElementsByTagName（“tr”）；
对于（i=0；i-1）{
发现=真；
}
}
如果（找到）{
tr[i].style.display=“”；
发现=错误；
}否则{
tr[i].style.display=“无”；
}
}
}

答案可以包括jQuery吗？您不应该有多个ID相同的HTML元素。元素的ID应该是唯一的。不要编辑文档，请编辑文档的样式。因此，选择不匹配的元素并添加

display:noneonkeyup

属性可能会更幸运。顺便问一下，你有没有一个好的JS、HTMP、PHP和CSS框架？刚开始，我就开始使用notepad++和xampp来做服务器端的东西，但是我可以使用一个好的框架。但它有可能在href字段上工作吗？{prs}'/>#scope_选项卡“target=“_blank”>@Ammad使用带有或的jquery tablesorter插件

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

<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>