Я хочу отфильтровать таблицу с помощью jQuery hide / show на основе того, что пользователь выбирает из нескольких элементов выбора.
Я хочу, чтобы пользователь мог выбрать несколько значений из 1, 2 или 3 извыберите элементы.Так что, возможно, они выберут 2 тренеров, 1 новобранца и 1 статус, или, может быть, только 1 тренера.Планирование создания функции, которая будет запускаться, когда пользователь щелкает любую из опций.
На мой взгляд, каждый элемент select будет иметь массив значений, выбранных пользователем.Поэтому мне нужно пройтись по каждому массиву и сравнить его с текстом в этом конкретном столбце.Было бы достаточно легко, если бы варианты были только из 1 выбранного элемента.Но так как это может быть 1, 2 или все 3, у меня возникают проблемы с обдумыванием этого вопроса.
Любая помощь будет с благодарностью принята.
Таблица:
<table id="reportsTable">
<thead>
<th>Report Number</th>
<th>Date</th>
<th>Name</th>
<th>Trainer</th>
<th>Status</th>
</thead>
<tbody>
<tr>
<td>12345-1</td>
<td>05/01/2011</td>
<td>First Recruit</td>
<td>First Trainer</td>
<td>Complete</td>
</tr>
<tr>
<td>12345-2</td>
<td>05/02/2011</td>
<td>First Recruit</td>
<td>Second Trainer</td>
<td>In Progress</td>
</tr>
<tr>
<td>54321-1</td>
<td>05/03/2011</td>
<td>Second Recruit</td>
<td>First Trainer</td>
<td>Created</td>
</tr>
</tbody>
</table>
Выбирает:
<select multiple="multiple" name="trainerFilter">
<option value="firsttrainer">First Trainer</option>
<option value="secondtrainer">Second Trainer</option>
</select>
<select multiple="multiple" name="recruitFilter">
<option value="firstrecruit">First Recruit</option>
<option value="secondrecruit">Second Recruit</option>
</select>
<select multiple="multiple" name="statusFilter">
<option value="created">Created</option>
<option value="inprogress">In Progress</option>
<option value="complete">Complete</option>
</select>
Похоже, я не могу опубликовать ответ на свой вопрос в течение 8 часов, но это то, что я придумал благодаря @Spencer Ruport.Это оказалось гораздо более запутанным, чем я ожидал, благодаря необходимости учитывать все возможные записи.Пользователь может выбрать что-то из первого элемента select, ничего из второго, и, возможно, 2 из третьего.Или, может быть, пользователь не выбирает ничего из первого и 2 из второго.Для любого данного ввода может быть более 6 фильтров, которые необходимо применить.
Я уверен, что есть лучший способ, чем этот, и похоже, что @Alison может быть связан с одним, но он работает.
function filterReports() {
$('.report').hide(); //Set all rows to hidden.
trainerVals = $('#trainerFilter').val();
recruitVals = $('#recruitFilter').val();
statusVals = $('#statusFilter').val();
if (trainerVals) { //Check if any trainers are selected.
$.each(trainerVals, function(index, trainer) {
filtered = false;
classString = '';
classString += '.' + trainer;
if (recruitVals) { //Check if trainers and recruits are selected.
$.each(recruitVals, function(index, recruit) {
filtered = false;
secondString = '';
secondString = classString + '.' + recruit; //Concat to a new string so we keep the old one intact.
if (statusVals) { //Check if trainers, recruits and statuses are selected.
$.each(statusVals, function(index, status) {
filtered = false;
finalString = '';
finalString += secondString + '.' + status; //Again concat to a new string.
$(finalString).show();
filtered = true; //By setting filtered to true, we only run the show once.
});
}
if (!filtered) { //If trainers and recruits are selected, but not a status, we need to apply that filter.
$(secondString).show();
filtered = true;
}
});
}
if (!filtered && statusVals) { //If only trainers and statuses are selected, go through those.
$.each(statusVals, function(index, status) {
filtered = false;
finalString = '';
finalString += classString + '.' + status;
$(finalString).show();
filtered = true;
});
}
if (!filtered) { //If only trainers are selected, apply that filter.
$(classString).show();
filtered = true;
}
});
}
if (!filtered && recruitVals) { //If trainers are not selected, by recruits are, run through the recruits.
$.each(recruitVals, function(index, recruit) {
classString = '';
classString += '.' + recruit;
if (statusVals) { //Check if recruits and statuses are selected
$.each(statusVals, function(index, status) {
finalString = '';
finalString += classString + '.' + status;
$(finalString).show();
filtered = true;
});
}
if (!filtered) { //If only recruits are selected, apply that filter.
$(classString).show();
filtered = true;
}
});
}
if (!filtered && statusVals) { //If both trainers and recruits are not selected, but statuses are, run through those.
$.each(statusVals, function(index, status) {
classString = '';
classString += '.' + status;
$(classString).show();
filtered = true;
});
}
if (!filtered) {
//No filters selected.
}
$("tr").removeClass("even"); //Remove current zebra striping.
$("tr:visible:even").addClass("even"); //Add zebra striping only for rows that are visible.
}