Question

我要过滤html表的内容。每个教程和jsfiddle示例仅显示一个可能的带有文本输入标签的过滤器。

我要寻找的是与下拉菜单配合使用的过滤器，例如。

用户将从下拉菜单中选择一个选项，该选项将被过滤。我以为这很简单，但无法弄清楚。

例如：https://www.w3schools.com/howto/howto_js_filter_table.asp

但是，它仅过滤一列！我想使用下拉选项菜单分别在每一列中进行过滤。

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>Filter</title>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
</head>
<body>

<table id="table_format" class="table table-bordered table-striped table-hover table-list-search">
<thead>
    <tr class="content">
        <th>any
        <select id='filterText' style='display:inline-block' onchange='filterText()'>
            <option disabled selected>Select</option>
            <option value='filtertext'>filtertext</option>
        </select>
        </th>
</thead>
<tbody  id="myTable">
<tr class="content"><td>..multiple..<td>....
</tbody>
</table>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>

<script>
function filterText()
    {  
        var rex = ""
        var rex = new RegExp($('#filterText').val());
        if(rex =="/all/"){
            clearFilter()}
        else{
            $('.content').hide();
            $('.content').filter(function() {
            return rex.test($(this).text());
            }).show();
    }
    }

function clearFilter()
    {
        $('.filterText').val('');
        $('.content').show();
    }
</script>

</body>
</html>

如何使用多个下拉菜单选项过滤HTML表格内容？

0 个答案: