可否增加筛选功能
时间: 2024-01-10 17:03:58 浏览: 24
当然可以。你可以在读取Excel表格后,在页面中添加一个输入框,当用户输入关键字后,使用JavaScript过滤出符合条件的行,再将它们展示出来。
下面是一个例子,它在前面的代码基础上增加了一个输入框和一个按钮,并使用jQuery实现了筛选功能:
```html
<!DOCTYPE html>
<html>
<head>
<title>读取Excel表格</title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/xlsx/0.15.6/xlsx.full.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
</head>
<body>
<input type="file" id="fileInput" />
<input type="text" id="filterInput" placeholder="输入关键字筛选" />
<button id="filterBtn">筛选</button>
<table id="dataTable"></table>
<script>
const fileInput = document.getElementById('fileInput');
const dataTable = document.getElementById('dataTable');
const filterInput = document.getElementById('filterInput');
const filterBtn = document.getElementById('filterBtn');
let rows = [];
fileInput.addEventListener('change', (e) => {
const file = e.target.files[0];
const reader = new FileReader();
reader.onload = (e) => {
const data = new Uint8Array(e.target.result);
const workbook = XLSX.read(data, {type: 'array'});
const sheetName = workbook.SheetNames[0];
const sheet = workbook.Sheets[sheetName];
rows = XLSX.utils.sheet_to_json(sheet, {header: 1});
renderTable(rows);
};
reader.readAsArrayBuffer(file);
});
filterBtn.addEventListener('click', () => {
const keyword = filterInput.value.trim();
const filteredRows = rows.filter(row => row.some(cell => cell.includes(keyword)));
renderTable(filteredRows);
});
function renderTable(rows) {
dataTable.innerHTML = '';
for (let i = 0; i < rows.length; i++) {
const row = dataTable.insertRow(-1);
for (let j = 0; j < rows[i].length; j++) {
const cell = row.insertCell(-1);
cell.innerHTML = rows[i][j];
}
}
}
</script>
</body>
</html>
```
这段代码会在页面中显示一个文件选择框、一个输入框和一个按钮。当用户选择一个Excel文件后,会将Excel表格中的数据读取出来,并以HTML表格的形式展示出来。当用户在输入框中输入关键字并点击按钮后,会筛选出符合条件的行,并再次展示出来。