根据textbox javascript中输入的条件筛选html表

我有一个html表格，显示学生姓名和他休假的次数。如何过滤并显示对休假次数的限制 ，如在文本框中输入5，则应筛选并显示假期为5或更多的学生。 我现在使用的代码显示输入值的记录

    function myFunction1() {
        var input, filter, table, tr, td, i;
        input = document.getElementById("myInput1");
        filter = input.value.toUpperCase();
        table = document.getElementById("myTable");
        tr = table.getElementsByTagName("tr");
        for (i = 0; i < tr.length; i++) {
            td = tr[i].getElementsByTagName("td")[6];
             if (td) {
                 if (td.innerHTML.toUpperCase().indexOf(filter) > -1) {
                     tr[i].style.display = "";
                 } else {
                      tr[i].style.display = "none";
                 }
              }       
        }
    }

---

根据我的理解，快速拼凑出你想要的东西。我还使用了相同的过滤功能，允许我按姓名或学生年份进行筛选。这是一个灵活的筛选例程，我希望我花时间避免硬连接字符串与数字的处理，但出于您的目的，我认为这太过分了

表行有一个奇怪的问题：不能简单地显示=none和显示=block，这会破坏表结构。这就是为什么它是display=none和display=below。一些消息人士指出了这一点，我很高兴他们这样做了。我在那堵墙上敲了一会儿头

祝你好运

//存储所有输入。。。 var filterByName=document.getElementByIdfilter-by-name； var filterByYear=document.getElementByIdfilter-by-year； var filterByLeaves=document.getElementByIdfilter-by-leaves； //然后把桌子放好。 var studentinfo=document.getElementsByClassNamestudent-info[0]； //这些函数将在事件侦听器中调用。 //通过这样做，我只有一个过滤器功能。 函数名{ var filterString=filterByName.value； filterByname，filterString； }; 功能按年{ var filterString=filterByear.value； FilterByear，filterString； }; 函数byLeaves{ var filterString=filterByLeaves.value； 过滤器叶，过滤器管柱； }; /** *filter函数本身接受要筛选的字段 *按和要用作筛选器数据的字符串。 *本质上，我们取身体的每一行，找到td *要按筛选，请将其与筛选数据本身进行比较。 *有两种类型的比较：文本或数字。 * **/ 函数filterByfilter，filterString{ 变量选择器=.student-+过滤器； var rows=StudentInfo.querySelectorAlltbody tr； 对于变量i=0；i=parseIntfilterString | | filterString.length==0{ 行[i].style.display=； }否则{ 行[i].style.display=none； }; 打破 } } }; //每个输入的事件侦听器。 filterByName.addEventListenerkeyup，按名称； FilterByear.addEventListenerkeyup，按年； FilterByleves.addEventListenerkeyup，byLeaves； .学生信息{ 字体系列：Arial，无衬线； 宽度：100%； 表布局：固定； } 泰德{ 字体大小：粗体； } 标签{ 显示：块； } .学生姓名{ 宽度：40%； } .学生证， .学生年， .学生离开{ 宽度：20%； 文本对齐：居中； } 名称 美国身份证 年 叶子 亚伯拉罕·阿巴斯 00141 2018 4. 比利·布拉格 00143 2018 7. 康纳查斯 00147 2019 5. 丹尼尔·达耶 00150 2019 0 爱德华埃平顿 00151 2018 6. 弗兰克·福特 00153 2020 9 按…筛选。。。 姓名： 年份： 离开： jQuery版本

var filter = $('#myInput1').val.toUpperCase();

  $("#myTable tr td:eq(6)").each( function() {
       var str = $(this).html().toUpperCase()
       if( str.indexOf(filter) > -1) 
         $(this).parent('tr').css('display','')
       else 
         $(this).parent('tr').css('display','none')
   })

搜索文本框：-

<label>Search:<input class="form-control input-sm" placeholder="" aria-controls="DataTables_Table_0" type="search" id="txtSearch" onkeyup="filter(this);"></label>

---

如果jQuery是一个选项，我建议您看看dataTable插件。这个问题将从质量改进中受益。您的代码缩进应该重新处理，并且其正文和标题很难阅读。可以接受jQuery版本吗？显示的筛选器块将匹配一个字符串，并且仅匹配一个字符串。你问的是一个数字比较。请看下面我的建议。我非常喜欢jQuery的简洁性。然而，这并没有解决他的显示函数也无法解决的问题：他想要一个数字比较，显示所有大于给定输入的结果。嗨！欢迎来到StackOverflow！请不要在此网站上发布文本图像，尽可能发布文本。看见另外，你的编辑也搞砸了，你的图像不可见。有关如何将图像正确插入帖子的信息，请参见。我回滚了您的编辑。

 function filter(element) {
        var value = $(element).val();

        $("#DataTables_Table_1 tr").each(function () {
            if ($(this).text().search(value) > -1) {
                $(this).show();
            }
            else {
                $(this).hide();
            }
        });
    }