如何使用javascript通过下拉菜单过滤html表的数据

我有一个html文件，它生成了一个包含3列和动态行的表。该表的数据将从java项目中读取。java项目在这里并不重要。 我还在我的表格上做了一个下拉菜单，第一列有两个条目。现在，当我选择下拉菜单的一个条目时，我想过滤我的表。我该怎么做？我需要如何在这里使用JavaScript

请参阅下面的代码（仅html，因为我不知道如何使用Javascript）

飞机
数字1
数字2
日期
附加

您可以这样做：

（改编自，将

输入

元素替换为a，并将

onkeyup

属性替换为-，有关其工作原理的进一步解释，请参见代码中的注释）

函数filterTable（）{
//变数
下拉列表、表格、行、单元格、国家/地区、过滤器；
dropdown=document.getElementById（“countriesDropdown”）；
table=document.getElementById（“myTable”）；
行=table.getElementsByTagName（“tr”）；
过滤器=下拉列表.value；
//循环浏览行并隐藏与筛选器不匹配的国家/地区的行
for（让row of rows）{/`for…of`循环通过节点列表
cells=row.getElementsByTagName（“td”）；
country=cells[1]| | null；//获取第二个'td'或不获取任何内容
//如果筛选器设置为“全部”，或这是标题行，或第二个“td”文本与筛选器匹配
if（filter==“All”| | |！country | |（filter==country.textContent））{
row.style.display=”“；//显示此行
}
否则{
row.style.display=“无”//隐藏此行
}
}
}

全部的
瑞典
德国
命名国家
英加瑞典
瑞典海伦娜酒店
汉斯德国
安那德国

这不是有效的html…您需要在下拉列表中附加一个

onchange事件

，然后对表中的行执行隐藏和显示魔术，或者向服务器发送

ajax

请求，仅返回与筛选器匹配的结果，并重新填充表体。感谢cat，但在使用“onchange”而不是“oninput”之前，该代码不起作用，因为“oninput”在中不起作用，所以“onchange”也不起作用。您还需要使用

引用您的JavaScript文件，它在代码段中似乎工作正常。在html页面上运行脚本不需要外部文件，但引用外部文件是将编程与标记分开的好主意。更好的做法是删除

oninput

（或

onchange

）属性，并使用

document.getElementById（“countriesDropdown”）.addEventListener（“更改”、“筛选表”）处理JS代码中的该部分<table>
    <colgroup>
        <col width="150" style="background-color:red"></col>
        <col width="165"></col>
    </colgroup>
    <tr  style ="background-color:grey">
        <th>
            Plane
            <select size="2" name="choice">
                <option selected="selected">number_1</option>
                <option>number_2</option>                       
            </select>                   
        </th>   
        <th>date</th>
        <th>addition</th>
    </tr>


    <xsl:for-each select="logstore/plane/trigger">
    <tbody>
        <tr>
            <td><xsl:value-of select="../name"/></td>
            <td><xsl:value-of select="date"/></td>
            <td><xsl:value-of select="addition"/></td>
        </tr>
    </tbody>
    </xsl:for-each>
</table>