Javascript HTML表格复选框筛选

我需要一些帮助，将筛选从选择更改为多复选框选择。下面的代码当前仅使用一个选项进行筛选。我想能够选择一个复选框形式的多个年龄和条款。谢谢您的指导

滤器
名字
姓
年龄
电子邮件
性别
学期
登记
约翰
史密斯
15
123
男性
2017年夏季
2018年秋季
简
雌鹿
16
456
女性
2018年秋季
2019年秋季
鲍比
亚当斯
15
789
男性
2019年春季
2018年秋季
莎拉
李
15
456
女性
2018年秋季
2018年秋季
（函数（$）{
$.fn.tableFilterHeaders=函数（filterFn）{
这个。每个（（索引，标题）=>{
设$header=$（header），
$table=$header.closest（'table'），
text=$header.text（），
colIndex=$header.closest（'th'）.index（），
fieldName=$header.attr（'data-field-name'）| | text.toLowerCase（），
$select=$（''）
.data（'fieldName'，fieldName）
.append（$（''）.text（text）.val（''）.prop（'disabled'，true））
.append（$（''）.text（'All'）.val（'All'））
.append（$table.find（'tbody tr'））
.toArray（）
.map（tr=>{
返回$（tr）.find（`td:eq（${colIndex}）`）.text（）；
})
.filter（text=>text.trim（）.length>0）
.sort（）
.filter（（v，i，a）=>a.indexOf（v）==i）
.map（文本=>{
返回$（''）.text（text）.val（text）；
}));
$header.empty（）.append（$select.val（“”）.on（'change'，filterFn））；
});
};
$.fn.initRowClasses=函数（oddCls、evenCls）{
this.find（'tbody tr'）。每个（函数（i）{
$（this）.toggleClass（oddCls，i%2==0）.toggleClass（evenCls，i%2==1）；
});
};
$.fn.updateRowClasses=函数（oddCls、evenCls）{
this.find（'tbody tr:visible:even'）.addClass（oddCls）.removeClass（evenCls）；
this.find（'tbody tr:visible:odd'）.addClass（evenCls）.removeClass（oddCls）；
};
})（jQuery）；
$（'#myTable'）。initRowClasses（'奇数'，'偶数'）；
$（'.dropdown header'）.TableFilterHeader（filterText）；
函数过滤器文本（e）{
设$filter=$（e.target），
$table=$filter.closest（'table'），
$filters=$table.find（'.dropdown header select'），
filterObj=$filters.toArray（）.reduce（（对象，过滤器）=>{
设$filter=$（filter）；
返回Object.assign（obj，{[$filter.data（'fieldName'）]：$filter.val（）}）；
}, {});
如果（$filter.val（）=='all'）{
$filter.val（“”）
}
$table.find（'tbody tr'）。每个（函数（）{
$（this）.toggle（$（this）.find（'td'）.toArray（）.every（td=>{
让$td=$（td），fieldName=$td.attr（'data-field-name'）；
if（fieldName！=null）{
返回filterObj[fieldName]==null||
filterObj[fieldName]=''||
filterObj[fieldName]=“全部”||
filterObj[fieldName]==$td.text（）；
}
返回true；
}));
});
$table.updateRowClasses（'odd'、'偶数'）；
}

您正在寻找多选吗

你试过这个吗

$select = $('<select>')
        .data('fieldName', fieldName)
        .attr('multiple')

$select=$（“”）
.data（'fieldName'，fieldName）
.attr（'多个'）

PS：如果您需要使用复选框实现此功能，请参见以下内容：

---

您尝试过什么，具体出了什么问题？我没有看到任何复选框。我想他正在寻找的是“如何为列实现multiselect”。基于当前布局的建议：在“年龄”下拉列表中，添加选项“multi…”，如果用户选择了它，则取消隐藏复选框（这些复选框将位于列中每个单元格中的值的左侧，理想情况下是一个div中的复选框和另一个div中的值，以便选择）。用户选中给定的框，选择它所在的单元格，获取该单元格中的值，然后像现在一样添加到筛选中。如果用户选择“multi”以外的任何内容，删除这些值并设置新的单个值。@TimConsolazio感谢您的回答，您能提供一些测试代码吗？下面的示例部分工作，但它不是选择列表的一部分。我试图编辑上面的示例，但它破坏了筛选。我试图添加该选项，对于多选，它删除了d完整的rop下拉菜单。谢谢你的链接，我会看一看。