javascript - 在下拉列表中实现按日期过滤功能
问题描述
我尝试使用下拉列表按日期对表格中的条目进行排序。今天，过去 7 天，过去 14 天，过去 30 天和过去 3 个月。使用#selectFilter1 & #selectFilter3 我已经做了一个过滤器。不幸的是，我没有按日期过滤。#selectFilter2 将用于此。有人可以帮助我吗？
这是代码：
管理员.php
<div class="row">
<div class="input-field col s3">
<select id="selectFilter1" name="filter" required>
<option id="Alle" value="" selected>Kein Filter</option>
<option id="Geburtstagskarte" name="birthdaycard1" data-icon="images/birthdaycard1.jpg"
value="">Geburtstag
</option>
<option id="Osterkarte" name="eastern1" data-icon="images/eastern1.jpg" value="">Ostern</option>
<option id="Weihnachtskarte" name="merrychristmas1" data-icon="images/merrychristmas1.jpg"
value="">Weihnachten
</option>
</select>
<label>Filtern nach Kartentyp:</label>
<div id="imagePreview"></div>
</div>
<div class="input-field col s3">
<select id="selectFilter2" name="filter" required>
<option id="Alle" value="" selected>Kein Filter</option>
<option id="date1" name="sendedatum" data-icon="" value="">Heute</option>
<option id="date2" name="sendedatum" data-icon="" value="">Letzte 7 Tage</option>
<option id="date3" name="sendedatum" data-icon="" value="">Letzte 14 Tage</option>
<option id="date4" name="sendedatum" data-icon="" value="">Letzte 30 Tage</option>
<option id="date5" name="sendedatum" data-icon="" value="">Letzte 3 Monate</option>
</select>
<label>Filtern nach Sendedatum:</label>
<div id="imagePreview"></div>
</div>
<div class="input-field col s3">
<select id="selectFilter3" name="filter" required>
<option id="Alle" value="" selected>Kein Filter</option>
<option id="0" name="Ausstehend" data-icon="" value="">Pending</option>
<option id="1" name="Verschickt" data-icon="" value="">Versendet</option>
</select>
<label>Filtern nach Status:</label>
<div id="imagePreview"></div>
</div>
<div class="input-field col s3">
<i class="material-icons prefix">search</i>
<input id="icon_prefix" type="text" class="validate" onkeyup="search()">
<label for="icon_prefix">Search</label>
</div>
</div>
<form action="admin.php" method="post">
<div class="table-wrapper">
<div class="table-scroll">
<table id="myTable">
<tr>
<th>Kartentyp</th>
<th>Absender</th>
<th>Empfänger</th>
<th>Sendedatum</th>
<th id="smallCol">Verschickt</th>
<th id="smallCol">Bestätigung</th>
<th>Edit</th>
</tr>
<?php
foreach ($result as $row) {
if ($row['Dispatched'] == 0) {
$dispatched = 'Pending';
} else {
$dispatched = 'Versendet';
}
?>
<tr class="Alle <?php echo $row['Category']; ?> <?php echo $row['Dispatched']; ?> <?php echo $row['SendDate']; ?>">
<td><?php echo $row['Category']; ?></td>
<td><?php echo $row['Sender']; ?></td>
<td><?php echo $row['Receiver']; ?></td>
<td><?php echo $row['SendDate']; ?></td>
<td><?php echo $dispatched; ?></td>
<td>Placeholder</td>
<td width="15%"><input type="submit" name="delete_<?php echo $row['ID']; ?>" value="delete"
onclick="return confirm('Eintrag wird gelöscht. Sind Sie sicher?')">
<input type="submit" name="viewDetail_<?php echo $row['ID']; ?>" value="details"></td>
</tr>
<?php
}
?>
</table>
</div>
</div>
</form>
</div>
<br>
</div>
</div>
<script type="application/x-javascript">
function search() {
var input, filter, table, tr, td, td1, td2, td3, td4, td5, i, cleanedFilter;
input = document.getElementById("icon_prefix");
filter = input.value.toUpperCase();
table = document.getElementById("myTable");
tr = table.getElementsByTagName("tr");
cleanedFilter = filter
for (i = 0; i < tr.length; i++) {
td = tr[i].getElementsByTagName("td")[0];
td1 = tr[i].getElementsByTagName("td")[1];
td2 = tr[i].getElementsByTagName("td")[2];
td3 = tr[i].getElementsByTagName("td")[3];
td4 = tr[i].getElementsByTagName("td")[4];
td5 = tr[i].getElementsByTagName("td")[5];
if (td) {
cellContent = td.innerHTML.toUpperCase()
cellContent1 = td1.innerHTML.toUpperCase()
cellContent2 = td2.innerHTML.toUpperCase()
cellContent3 = td3.innerHTML.toUpperCase()
cellContent4 = td4.innerHTML.toUpperCase()
cellContent5 = td5.innerHTML.toUpperCase()
if (cellContent.indexOf(cleanedFilter) > -1 || cellContent1.indexOf(cleanedFilter) > -1 || cellContent2.indexOf(cleanedFilter) > -1 || cellContent3.indexOf(cleanedFilter) > -1 || cellContent4.indexOf(cleanedFilter) > -1 || cellContent5.indexOf(cleanedFilter) > -1) {
tr[i].style.display = "";
} else {
tr[i].style.display = "none";
}
}
}
}
// Filter Funktionen
$('#selectFilter1').change(function () {
$(".Alle").hide();
$("." + $(this).find(":selected").attr("id")).show();
});
$('#selectFilter2').change(function () {
$(".Alle").hide();
$("." + $(this).find(":selected").attr("id")).show();
});
$('#selectFilter3').change(function () {
$(".Alle").hide();
$("." + $(this).find(":selected").attr("id")).show();
});
</script>
解决方案
好的，我找到了解决方案。这不漂亮，我知道，但它有效。
<div class="row">
<div class="input-field col s3">
<select id="selectFilter1" name="filter" required>
<option id="Alle" value="" selected>Kein Filter</option>
<option id="Geburtstagskarte" name="birthdaycard1" data-icon="images/birthdaycard1.jpg"
value="">Geburtstag
</option>
<option id="Osterkarte" name="eastern1" data-icon="images/eastern1.jpg" value="">Ostern</option>
<option id="Weihnachtskarte" name="merrychristmas1" data-icon="images/merrychristmas1.jpg"
value="">Weihnachten
</option>
</select>
<label>Filtern nach Kartentyp:</label>
<div id="imagePreview"></div>
</div>
<div class="input-field col s3">
<select id="selectFilter2" name="filter" required onchange="dateFilter()>
<option id="Alle" value="" selected>Kein Filter</option>
<option id="date1" name="sendedatum" data-icon="" value="">Heute</option>
<option id="date2" name="sendedatum" data-icon="" value="">Letzte 7 Tage</option>
<option id="date3" name="sendedatum" data-icon="" value="">Letzte 14 Tage</option>
<option id="date4" name="sendedatum" data-icon="" value="">Letzte 30 Tage</option>
<option id="date5" name="sendedatum" data-icon="" value="">Letzte 3 Monate</option>
</select>
<label>Filtern nach Sendedatum:</label>
<div id="imagePreview"></div>
</div>
<div class="input-field col s3">
<select id="selectFilter3" name="filter" required>
<option id="Alle" value="" selected>Kein Filter</option>
<option id="0" name="Ausstehend" data-icon="" value="">Pending</option>
<option id="1" name="Verschickt" data-icon="" value="">Versendet</option>
</select>
<label>Filtern nach Status:</label>
<div id="imagePreview"></div>
</div>
<div class="input-field col s3">
<i class="material-icons prefix">search</i>
<input id="icon_prefix" type="text" class="validate" onkeyup="search()">
<label for="icon_prefix">Search</label>
</div>
</div>
<form action="admin.php" method="post">
<div class="table-wrapper">
<div class="table-scroll">
<table id="myTable">
<tr>
<th>Kartentyp</th>
<th>Absender</th>
<th>Empfänger</th>
<th>Sendedatum</th>
<th id="smallCol">Verschickt</th>
<th id="smallCol">Bestätigung</th>
<th>Edit</th>
</tr>
<?php
foreach ($result as $row) {
if ($row['Dispatched'] == 0) {
$dispatched = 'Pending';
} else {
$dispatched = 'Versendet';
}
?>
<tr class="Alle <?php echo $row['Category']; ?> <?php echo $row['Dispatched']; ?> <?php echo $row['SendDate']; ?>">
<td><?php echo $row['Category']; ?></td>
<td><?php echo $row['Sender']; ?></td>
<td><?php echo $row['Receiver']; ?></td>
<td><?php echo $row['SendDate']; ?></td>
<td><?php echo $dispatched; ?></td>
<td>Placeholder</td>
<td width="15%"><input type="submit" name="delete_<?php echo $row['ID']; ?>" value="delete"
onclick="return confirm('Eintrag wird gelöscht. Sind Sie sicher?')">
<input type="submit" name="viewDetail_<?php echo $row['ID']; ?>" value="details"></td>
</tr>
<?php
}
?>
</table>
</div>
</div>
</form>
</div>
<br>
</div>
</div>
<script type="application/x-javascript">
function search() {
var input, filter, table, tr, td, td1, td2, td3, td4, td5, i, cleanedFilter;
input = document.getElementById("icon_prefix");
filter = input.value.toUpperCase();
table = document.getElementById("myTable");
tr = table.getElementsByTagName("tr");
cleanedFilter = filter
for (i = 0; i < tr.length; i++) {
td = tr[i].getElementsByTagName("td")[0];
td1 = tr[i].getElementsByTagName("td")[1];
td2 = tr[i].getElementsByTagName("td")[2];
td3 = tr[i].getElementsByTagName("td")[3];
td4 = tr[i].getElementsByTagName("td")[4];
td5 = tr[i].getElementsByTagName("td")[5];
if (td) {
cellContent = td.innerHTML.toUpperCase()
cellContent1 = td1.innerHTML.toUpperCase()
cellContent2 = td2.innerHTML.toUpperCase()
cellContent3 = td3.innerHTML.toUpperCase()
cellContent4 = td4.innerHTML.toUpperCase()
cellContent5 = td5.innerHTML.toUpperCase()
if (cellContent.indexOf(cleanedFilter) > -1 || cellContent1.indexOf(cleanedFilter) > -1 || cellContent2.indexOf(cleanedFilter) > -1 || cellContent3.indexOf(cleanedFilter) > -1 || cellContent4.indexOf(cleanedFilter) > -1 || cellContent5.indexOf(cleanedFilter) > -1) {
tr[i].style.display = "";
} else {
tr[i].style.display = "none";
}
}
}
}
// Filter Funktionen
$('#selectFilter1').change(function () {
$(".Alle").hide();
$("." + $(this).find(":selected").attr("id")).show();
});
$('#selectFilter2').change(function () {
$(".Alle").hide();
$("." + $(this).find(":selected").attr("id")).show();
});
$('#selectFilter3').change(function () {
$(".Alle").hide();
$("." + $(this).find(":selected").attr("id")).show();
});
function dateFilter() {
var date1 = new Date(new Date().setDate(new Date().getDate() - 0)).toISOString().slice(0, 10);
var date2 = new Date(new Date().setDate(new Date().getDate() - 7)).toISOString().slice(0, 10);
var date3 = new Date(new Date().setDate(new Date().getDate() - 14)).toISOString().slice(0, 10);
var date4 = new Date(new Date().setDate(new Date().getDate() - 30)).toISOString().slice(0, 10);
var date5 = new Date(new Date().setDate(new Date().getDate() - 90)).toISOString().slice(0, 10);
var ddl = document.getElementById("selectFilter2");
var selectedValue = ddl.options[ddl.selectedIndex].value;
var table, tr, td3, i;
table = document.getElementById("myTable");
tr = table.getElementsByTagName("tr");
for (i = 0; i < tr.length; i++) {
td3 = tr[i].getElementsByTagName("td")[3];
if (td3) {
cellContent3 = td3.innerHTML.toUpperCase()
if (selectedValue == "date1") {
if (cellContent3 == date1) {
tr[i].style.display = "";
} else {
tr[i].style.display = "none";
}
}
if (selectedValue == "date2") {
if (cellContent3 <= date1 && cellContent3 >= date2) {
tr[i].style.display = "";
} else {
tr[i].style.display = "none";
}
}
if (selectedValue == "date3") {
if (cellContent3 <= date1 && cellContent3 >= date3) {
tr[i].style.display = "";
} else {
tr[i].style.display = "none";
}
}
if (selectedValue == "date4") {
if (cellContent3 <= date1 && cellContent3 >= date4) {
tr[i].style.display = "";
} else {
tr[i].style.display = "none";
}
}
if (selectedValue == "date5") {
if (cellContent3 <= date1 && cellContent3 >= date5) {
tr[i].style.display = "";
} else {
tr[i].style.display = "none";
}
}
if (selectedValue == "Alle") {
tr[i].style.display = "";
}
}
}
}
</script>
推荐阅读
- python - 有没有更好的方法来遍历循环内字典中的键？
- regex - Perl：标量和字符串匹配中的赋值（正则表达式）
- python - 连接多个数据帧时如何解决这个 NaN 值（索引）熊猫问题？
- hadoop - Hadoop YARN：如何强制将节点标记为“丢失”而不是“关闭”？
- javascript - 通过 redux 工具包的 addOne 方法和 createEntityAdapter 添加新项目时，我的 redux 状态未更新
- google-cloud-firestore - firestore 规则将请求数据与 db 中的数据进行比较
- android - 使用 Flutter 在 HTML 中插入 Android 图像的路由
- sql - Postgres - 使用相同的查询多次更新列
- kotlin - Kotlin：期待成员声明
- android - 使用 Android 意图过滤器 pathPattern 匹配 url