用JS设计记录每株番茄上番茄数量、成熟度、甜度的后台管理界面,可根据日期筛选
时间: 2023-11-30 15:02:19 浏览: 31
好的,针对您的需求,我可以提供以下的 JS 设计方案:
1. 首先,在 HTML 中创建一个表格,用于展示每株番茄的相关数据,同时在页面上添加一个日期选择器,用于筛选数据。
```html
<input type="date" id="datepicker">
<table id="tomato-table">
<thead>
<tr>
<th>日期</th>
<th>番茄数量</th>
<th>成熟度</th>
<th>甜度</th>
</tr>
</thead>
<tbody>
<!-- 表格数据将在 JS 中动态生成 -->
</tbody>
</table>
```
2. 在 JS 中通过 AJAX 请求后台数据,根据日期进行筛选,并将数据动态生成到表格中。
```javascript
const datepicker = document.getElementById('datepicker');
const tomatoTable = document.getElementById('tomato-table');
datepicker.addEventListener('change', () => {
const selectedDate = datepicker.value;
// 发起 AJAX 请求,获取后台数据
fetch(`/api/tomatoes?date=${selectedDate}`)
.then(response => response.json())
.then(data => {
// 清空表格
tomatoTable.querySelectorAll('tbody tr').forEach(tr => tr.remove());
// 动态生成表格数据
data.forEach(tomato => {
const tr = document.createElement('tr');
tr.innerHTML = `
<td>${tomato.date}</td>
<td>${tomato.quantity}</td>
<td>${tomato.maturity}</td>
<td>${tomato.sweetness}</td>
`;
tomatoTable.querySelector('tbody').appendChild(tr);
});
});
});
```
3. 在后台服务器中处理 AJAX 请求,根据日期从数据库中查询数据,并返回 JSON 格式的数据给前端。
```javascript
// 假设使用 Express 框架
app.get('/api/tomatoes', (req, res) => {
const { date } = req.query;
// 在数据库中查询数据
const query = `SELECT * FROM tomatoes WHERE date='${date}'`;
db.query(query, (err, result) => {
if (err) throw err;
// 返回 JSON 格式的数据
res.json(result);
});
});
```
希望这个简单的 JS 设计方案能够对您有所帮助。当然,具体实现还需要根据您的具体情况进行调整和完善。