Я хочу отфильтровать содержимое таблицы 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>