請你幫我製作一個HTML網頁,需要實現記錄品質異常信息,可以填入異常信息,并且可以回查異常信息
时间: 2024-03-16 17:45:37 浏览: 65
《信息学奥赛一本通》:第5章 搜索与回溯算法(C++版)
好的,以下是一个简单的 HTML 页面示例,可以记录品质異常信息并回查:
```html
<!DOCTYPE html>
<html>
<head>
<title>品质異常信息记录</title>
<meta charset="UTF-8">
</head>
<body>
<h1>品质異常信息记录</h1>
<form>
<label for="machine">机器名:</label>
<input type="text" id="machine" name="machine"><br><br>
<label for="shift">班次:</label>
<input type="text" id="shift" name="shift"><br><br>
<label for="responsible">负责人:</label>
<input type="text" id="responsible" name="responsible"><br><br>
<label for="issue">異常現象:</label>
<textarea id="issue" name="issue"></textarea><br><br>
<input type="button" value="保存" onclick="saveRecord()">
<input type="button" value="查询" onclick="searchRecords()">
</form>
<h2>品质異常信息历史记录</h2>
<table id="recordTable">
<tr>
<th>机器名</th>
<th>班次</th>
<th>负责人</th>
<th>異常現象</th>
</tr>
</table>
<script>
function saveRecord() {
// 获取输入框中的值
var machine = document.getElementById("machine").value;
var shift = document.getElementById("shift").value;
var responsible = document.getElementById("responsible").value;
var issue = document.getElementById("issue").value;
// 将记录写入本地存储
var records = localStorage.getItem("records");
if (records === null) {
records = [];
} else {
records = JSON.parse(records);
}
records.push([machine, shift, responsible, issue]);
localStorage.setItem("records", JSON.stringify(records));
// 清空输入框
document.getElementById("machine").value = "";
document.getElementById("shift").value = "";
document.getElementById("responsible").value = "";
document.getElementById("issue").value = "";
// 提示保存成功
alert("保存成功!");
}
function searchRecords() {
// 从本地存储中读取记录
var records = localStorage.getItem("records");
if (records === null) {
records = [];
} else {
records = JSON.parse(records);
}
// 显示记录
var table = document.getElementById("recordTable");
table.innerHTML = "<tr><th>机器名</th><th>班次</th><th>负责人</th><th>異常現象</th></tr>";
for (var i = 0; i < records.length; i++) {
var row = table.insertRow(i + 1);
for (var j = 0; j < records[i].length; j++) {
var cell = row.insertCell(j);
cell.innerHTML = records[i][j];
}
}
}
</script>
</body>
</html>
```
在上面的代码中,我们首先创建了一个包含四个输入框和两个按钮的表单,用于输入机器名、班次、负责人和異常現象等信息,并提供保存和查询功能。在保存按钮的回调函数中,我们首先使用 `getElementById()` 方法获取输入框中的值,然后将这些值打包成一个列表并存储到本地存储中。在查询按钮的回调函数中,我们从本地存储中读取记录,并将其显示在表格中。需要注意的是,这里使用了 JSON 格式来存储记录,以便于在读取时进行解析。
请注意,上面的代码只是一个示例,你需要根据自己的实际需求进行修改和完善。例如,你可能需要添加更多的输入框和按钮,或者对记录进行过滤和排序等操作。此外,由于本地存储的容量有限,你可能需要定期清理历史记录以节省空间。
阅读全文