【发布时间】：2019-07-04 00:29:16
【问题描述】：
我想用name 和date 过滤我的表列表：from 和to 字段，名称可以正常工作，但日期从和到不能正常工作。
这是我的代码：
$(function(){
//name part
$("#name").on("keyup", function() {
var value = $(this).val().toLowerCase();
$("#my-table").find('tr').filter(function() {
$(this).toggle($(this).find('td').text().toLowerCase().indexOf(value) > -1)
});
});
//from part
$("#from").bind("keyup change", function() {
var value = $(this).val().toLowerCase();
$("#my-table").find('tr').filter(function() {
$(this).toggle($(this).find('td').text().toLowerCase()<(value))
});
//case if date is empty, we display all the list
if(value.length === 0) {
$("#my-table").find('tr').show();
}
});
//to part
$("#to").bind("keyup change", function() {
var value = $(this).val().toLowerCase();
$("#my-table").find('tr').filter(function() {
$(this).toggle($(this).find('td').text().toLowerCase()>(value))
});
});
});.container input {
width:25%;
display:inline-block;
margin-bottom:20px;
}
.list-group {
border:1px solid #eaeaea;
padding:20px;
}
.list-group td, th {
border:1px solid #eaeaea;
padding:5px 50px;
text-align:center;
}<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
Date from : <input class="form-control" id="from" type="date">
to : <input class="form-control" id="to" type="date">
<input class="form-control" id="name" type="text" placeholder="Search by name...">
<br>
<table>
<thead>
<tr>
<th>Date</th>
<th>Name</th>
</tr>
</thead>
<tbody id="my-table">
<tr class="list-group">
<td >2015-01-01</td>
<td>John</td>
</tr>
<tr class="list-group">
<td>2015-01-30</td>
<td>notif</td>
</tr>
<tr class="list-group">
<td>2016-03-10</td>
<td>food</td>
</tr>
<tr class="list-group">
<td>2014-09-10</td>
<td>yop</td>
</tr>
<tr class="list-group">
<td>2017-12-30</td>
<td>wick</td>
</tr>
</tbody>
</table>
</div>【问题讨论】：
-
既然您使用的是引导程序，为什么不使用日期范围选择器？
-
我没想到...
标签： javascript jquery date filter