請你幫我用HTML寫一段代碼,需要實現製程記錄異常信息,並且可以查詢歷史記錄,異常信息保存在本地Excel中
时间: 2024-04-06 19:32:19 浏览: 19
好的,以下是一个简单的HTML代码,实现了记录异常信息和查询历史记录的功能,并将异常信息保存在本地Excel中。
```html
<!DOCTYPE html>
<html>
<head>
<title>製程記錄異常信息</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
// 定义一个记录异常信息的数组
var records = [];
// 将记录保存到Excel文件中
function saveRecords(){
var csv = '时间,异常信息\n';
records.forEach(function(record){
csv += record.time + ',' + record.info + '\n';
});
var link = document.createElement('a');
link.href = 'data:text/csv;charset=utf-8,' + encodeURIComponent(csv);
link.download = 'records.csv';
link.click();
}
// 添加一条记录
$('#add-record').click(function(){
var time = new Date().toLocaleString();
var info = $('#info').val();
records.push({time: time, info: info});
$('#info').val('');
alert('记录添加成功!');
});
// 查询历史记录
$('#query-records').click(function(){
var table = '<table><tr><th>时间</th><th>异常信息</th></tr>';
records.forEach(function(record){
table += '<tr><td>' + record.time + '</td><td>' + record.info + '</td></tr>';
});
table += '</table>';
$('#records-container').html(table);
});
// 保存记录到本地Excel文件
$('#save-records').click(function(){
saveRecords();
});
});
</script>
</head>
<body>
<h1>製程記錄異常信息</h1>
<p>
<label for="info">异常信息:</label>
<input type="text" id="info">
<button id="add-record">添加记录</button>
</p>
<p>
<button id="query-records">查询历史记录</button>
<button id="save-records">保存记录到本地Excel文件</button>
</p>
<div id="records-container"></div>
</body>
</html>
```
这个代码使用了 jQuery 库来简化操作,具体实现如下:
1. 定义一个记录异常信息的数组 `records`,保存添加的记录。
2. 点击“添加记录”按钮时,获取当前时间和输入框中的异常信息,将记录添加到数组中,并清空输入框。
3. 点击“查询历史记录”按钮时,遍历数组中的记录,生成一个 HTML 表格,并放置在页面中。
4. 点击“保存记录到本地Excel文件”按钮时,将数组中的记录转换为 CSV 格式,并使用 `download` 属性将其保存到本地 Excel 文件中。