Если вы ищете универсальное решение jQuery, вы можете проверить это:
//populate options
$('#lang').append([...$('#mytable tr td:nth-of-type(2)')].sort().reduce((options, option) => options+=`<option value="${$(option).text()}">${$(option).text()}</option>`,'<option value="All" selected>All</option>'));
//grab table data
const tableDataObj = {};
tableDataObj.data = [...$('#mytable tbody tr')].map(row => {
const rowObj = {};
[...$(row).children('td')].forEach((cell, index) => rowObj[$(`#mytable thead th:eq(${index})`).text()] = $(cell).text());
return rowObj;
});
tableDataObj.header = [];
tableDataObj.data.map(row => Object.keys(row)).flat().forEach(entry => {
if(tableDataObj.header.indexOf(entry) == -1) tableDataObj.header.push(entry);
});
//draw table upon selection
$('#lang').on('change', function() {
const filteredData = JSON.parse(JSON.stringify(tableDataObj));
filteredData.data = filteredData.data.filter(entry => entry.Language == $(this).val() || $(this).val() == 'All');
$('#mytable').html('<table></table>');
$('#mytable').append('<thead><tr>'+filteredData.header.reduce((thead, th) => thead+=`<th>${th}</th>`,''));
$('#mytable').append(`<tbody>${Object.values(filteredData.data).reduce((rows, row) => rows+='<tr>'+Object.values(row).reduce((tds, td) => tds += '<td>'+td+'</td>','')+'</tr>','')}</tbody>`);
});
<!doctype html>
<html>
<head>
<script type="application/javascript" src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<script type="application/javascript" src="test.js"></script>
<link rel="stylesheet" type="text/css" href="test.css">
</head>
<body>
<select id="lang"></select>
<table id="mytable">
<thead>
<tr>
<th>Greeting</th><th>Language</th>
</tr>
</thead>
<tbody>
<tr>
<td>Hello</td><td>English</td>
</tr>
<tr>
<td>Hallo</td><td>Deutsch</td>
</tr>
<tr>
<td>Selam</td><td>Turkce</td>
</tr>
<tr>
<td>Salut</td><td>Francais</td>
</tr>
<tr>
<td>Ciao</td><td>Italiano</td>
</tr>
</tbody>
</table>
</body>
</html>
Это не так уж и элегантно и масштабируемо, но дает общую идею.
Если вы запрашивали решение DataTables, я могу порекомендовать это плагин.С ним вам не нужно использовать дополнительные выпадающие списки - он аккуратный и простой, хотя в раннем выпуске он полностью соответствует вашим требованиям.При таком подходе вы можете получить несколько фильтров выбора в дополнение к базовой сортировке DataTables, разбивке на страницы / прокрутке.Вот это DEMO .