如何仅使用jQuery插件使用日期范围过滤表数据。我有一个下拉框数据取决于所选的日期,日期范围和值.Howcoz我想在网页中添加插件我们可以使用插件b
HTML:
<input id="seate" name="" type="text">
<input id="seate2" name="" type="text">
<table>
<caption>
Table
</caption>
<thead>
<tr>
<th>No</th>
<th>Status</th>
<th>Date</th>
</tr>
</thead>
<tbody class="rody">
<tr scope="row">
<td>11</td>
<td>In-Progress</td>
<td>11/05/17</td>
</tr>
<tr scope="row">
<td>12</td>
<td>In-Progress</td>
<td>02/01/18</td>
</tr>
<tr scope="row">
<td>1</td>
<td>In-Progress</td>
<td>11/01/17</td>
</tr>
<tr scope="row">
<td>13</td>
<td>In-Progress</td>
<td>11/08/17</td>
</tr>
<tr scope="row">
<td>14</td>
<td>In-Progress</td>
<td>11/06/17</td>
</tr>
<tr scope="row">
<td>15</td>
<td>In-Progress</td>
<td>11/04/17</td>
</tr>
</tbody>
</table>
最佳答案
我已经创建了表过滤器的功能
function display(startDate,endDate) {
//alert(startDate)
startDateArray= startDate.split("/");
endDateArray= endDate.split("/");
var startDateTimeStamp = new Date(startDateArray[2],+startDateArray[0],startDateArray[1]).getTime();
var endDateTimeStamp = new Date(endDateArray[2],+endDateArray[0],endDateArray[1]).getTime();
$("table tbody.mainBody tr").each(function() {
var rowDate = $(this).find('td:eq(2)').html();
rowDateArray= rowDate.split("/");
var rowDateTimeStamp = new Date(rowDateArray[2],+rowDateArray[0],rowDateArray[1]).getTime() ;
// alert(startDateTimeStamp<=rowDateTimeStamp)
// alert(rowDateTimeStamp<=endDateTimeStamp)
if(startDateTimeStamp<=rowDateTimeStamp && rowDateTimeStamp<=endDateTimeStamp) {
$(this).css("display","block");
} else {
$(this).css("display","none");
}
});
}
样本函数调用
display("11/08/2017","02/01/2018")
格式:
display(startDate,endDate);
连续30天显示(currentDate-30,currentDate);
注意请更改html日期格式
<tr scope="row">
<td>11</td>
<td>In-Progress</td>
<td>11/05/2017</td>
</tr>