使用JavaScript动态过滤HTML表格的行 [英] dynamically filter rows of a HTML table using JavaScript

问题描述

所以我有这张表：

 < table border =1align =center> 
< tr> 
< td> Broj_pu< / td> 
< td> Naziv_pu< / td> 
< td> ID< / td> 
< td> Naselje< / td> 
< td> zupanija< / td> 
< / tr> 
< tr> 
< td>< input type =textID =broj_puonkeydown =Filter（document.getElementById（'broj_pu'）。value，'broj_pu'）/>< / td> 
< td>< input type =textID =naziv_puonkeydown =Filter（document.getElementById（'naziv_pu'）。value，'naziv_pu'）/>< / td> 
< td>< input type =textID =IDonkeydown =Filter（document.getElementById（'ID'）。value，'ID'）/>< / td> 
< td>< input type =textID =naseljeonkeydown =Filter（document.getElementById（'naselje'）。value，'naselje'）/>< / td> 
< td>< input type =textID =zupanijaonkeydown =Filter（document.getElementById（'zupanija'）。value，'zupanija'）/>< / td> 
< / tr> 
 
< tr class =rowID =row_filter> 
< td> 10000< / td> 
< td>萨格勒布< / td> 
< td> 1< / td> 
< td> Sljeme< / td> 
< td> ZAGREBACKA< / td> 
< / tr> 
 
< tr class =rowID =row_filter> 
< td> 10000< / td> 
< td>萨格勒布< / td> 
< td> 2< / td> 
< td>萨格勒布 - 迪奥< / td> 
< td> ZAGREBACKA< / td> 
< / tr> 
 <！ - 很多行 - > 
 ... 
< / table> 
  

而且我已经开始使用这个JavaScript：

 < script type =text / javascript> 
函数Filter（text，column_name）{
 var x = document.getElementByClassName（row）; 
 var i = 0; 
 var y; 
 
 if（text！=）{
 switch（column_name）{
 casebroj_pu：
 for（i = 0; i< x。 length; i ++）{
y = x [i] .getElementByTagName（td）; $（b）if（（y [0] .value）.match（text）== null）{
 x [i] .attributes（style）={display：none;}; 
} 
} 
 break; 
 
 casenaziv_pu：
 y = x [i] .getElementByTagName（td）;如果（（y [1] .value）.match（text）== null）{
 x [i] .attributes（style）={display：none;}; 
} 
} 
 break; 
 
 caseID：
 y = x [i] .getElementByTagName（td）; $（b）if（（y [2] .value）.match（text）== null）{
 x [i] .attributes（style）={display：none;}; 
} 
} 
 break; 
 
 casenaselje：
 y = x [i] .getElementByTagName（td）;如果（（y [3] .value）.match（text）== null）{
 x [i] .attributes（style）={display：none;}; 
} 
} 
 break; 
 
 casezupanija：
 y = x [i] .getElementByTagName（td）; 
 if（（y [4] .value）.match（text）== null）{
 x [i] .attributes（style）={display：none;}; 
} 
} 
 break; 
} 
} 
} 
< / script> 
  

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

任何人都有想法？

EDIT1 ：

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

解决方案

这个问题让我想起java脚本是如何没有任何框架支持的:) p>

然而，我已经为您解决了这个问题（在Firefox 10.0.2上测试过）。

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

请记住，这仅仅是一个工作示例，您可能需要编写符合ALL-BAG的兼容脚本。

脚本：

  var filters = ['hide_broj_pu'，'hide_naziv_pu'，'hide_ID'，'hide_naselje'， 'hide_zupanija']; 
 
函数ExcludeRows（cls）{
 
 var skipRows = []; （i = 0; i< filters.length; i ++）
 if（filters [i]！= cls）skipRows.push（filters [i]）; 
 
 
 
 var pattern = skipRows.join（'|'）
 
返回模式; 
} 
 
函数Filter（srcField）{
 
 var node = srcField.parentNode; 
 
 var index = srcField.parentNode.cellIndex; 
 //所有DATA行
 
 var dataRows = document.getElementsByClassName（row）; 
 
 //确保dataRows没有任何已添加的过滤器类
 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 ++）{
 //如果已应用过滤器，则跳过
 
 if（dataRows [i] .className.match （skipRow））继续; 
 
 //现在我们知道要搜索哪一列
 //删除当前过滤器
 dataRows [i] .className = dataRows [i] .className.replace（replaceCls，'' ）; $！
 $ b if（！dataRows [i] .cells [index] .innerHTML.trim（）。match（searchReg））
 dataRows [i] .className = dataRows [i] .className + ''+过滤器; 
 
} 
 
 
 
} 
  

HTML

 < table border =1align =center > 
 tr< td> Broj_pu< / td>< td> Naziv_pu< / td>< td> ID< / td>< td> zupanija< / TD>< / TR> 
< tr> 
< td>< input type =textID =broj_puonkeydown =Filter（this）/>< / td> 
< td>< input type =textID =naziv_puonkeydown =Filter（this）/>< / td> 
< td>< input type =textID =IDonkeydown =Filter（this）/>< / td> 
< td>< input type =textID =naseljeonkeydown =Filter（this）/>< / td> 
< td>< input type =textID =zupanijaonkeydown =Filter（this）/>< / td> 
< / tr> 
 
 tr class =row>< td> 10000< / td>< td> Zagreb< / td>< td> 1< / td>< td> ; / TD>< TD> ZAGREBACKA< / TD>< / TR>萨格勒布< / td>< td> 2< / td>< td>萨格勒布-dio< TD>< TD> ZAGREBACKA< / TD>< / TR> 
< / table> 
  

CSS

  .hide_broj_pu，
 .hide_naziv_pu，
 .hide_ID，
 .hide_naselje，
 .hide_zupanija 
 {display：none} 
  

So I have this table:

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

And also I have started this 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>

Now, I need to filter the table as the user inputs letters to the text fields, but I have no idea how to edit the display document as I enter the data.

Anyone have an idea?

EDIT1:

So I edited the script but it doesn't seem to work. What did I do wrong?

解决方案

This question is reminding me of how java script is nasty without any framework support :)

However I have sorted-out this issue for you ( tested on firefox 10.0.2).

check the complete working solution on jsfiddle

please remember this is just working example , you might need to write ALL-Browser compliant script .

script:

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}

这篇关于使用JavaScript动态过滤HTML表格的行的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！