以下是一个示例代码,演示了如何通过选择月份来筛选表单数据:
HTML代码:
按月份筛选表单
Name
Email
Date
John
[email protected]
2022-01-15
Jane
[email protected]
2022-02-20
Mike
[email protected]
2022-01-05
JavaScript代码(script.js文件):
function filterForm() {
var month = document.getElementById("month").value;
var table = document.getElementById("formTable");
var rows = table.getElementsByTagName("tr");
// 隐藏所有行
for (var i = 1; i < rows.length; i++) {
rows[i].style.display = "none";
}
// 显示符合选择月份的行
for (var i = 1; i < rows.length; i++) {
var dateCell = rows[i].getElementsByTagName("td")[2];
var date = dateCell.textContent || dateCell.innerText;
var rowMonth = date.split("-")[1];
if (rowMonth === month) {
rows[i].style.display = "";
}
}
}
这段代码包含一个filterForm
函数,该函数会在选择月份发生变化时被调用。函数首先获取选择的月份,然后遍历表格中的每一行,将不符合选择月份的行隐藏起来,同时将符合选择月份的行显示出来。
在HTML代码中,通过onchange
事件将filterForm
函数绑定到月份选择框上,以便在选择发生变化时触发筛选操作。
上一篇:按月份日期进行过滤
下一篇:按月份筛选产品的数组