阅读提示：本文共计约9799个文字，预计阅读时间需要大约27分钟，由作者云服务器免费编辑整理创作于2023年11月06日15时39分28秒。
要实现根据下拉菜单里的条件动态渲染表格，我们可以使用 JavaScript 和 HTML 来实现。以下是一个简单的示例，展示了如何使用 JavaScript 根据用户选择的下拉菜单条件来动态渲染表格。
我们需要创建一个 HTML 文件，其中包含一个下拉菜单和一个用于显示表格的 div 元素。此外，我们还需要在 HTML 中引入一个外部 JavaScript 文件（例如 script.js），以便在其中编写我们的 JavaScript 代码。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Dynamic Table Rendering</title>
</head>
<body>
<select id="conditionSelect">
<option value="all">All</option>
<option value="modelA">Model A</option>
<option value="modelB">Model B</option>
</select>
<div id="tableContainer"></div>
<script src="script.js"></script>
</body>
</html>
接下来，我们在 script.js 文件中编写 JavaScript 代码。我们将使用 document.getElementById() 函数获取下拉菜单和表格容器元素的引用，并添加事件监听器以检测下拉菜单值的变化。当用户选择下拉菜单中的某个选项时，我们将根据所选条件动态渲染表格。
function renderTable(data, headers) {
const table = document.createElement('table');
const thead = document.createElement('thead');
const tbody = document.createElement('tbody');
for (let header of headers) {
const th = document.createElement('th');
th.textContent = header;
thead.appendChild(th);
}
for (let row of data) {
const tr = document.createElement('tr');
for (let cell of row) {
const td = document.createElement('td');
td.textContent = cell;
tr.appendChild(td);
}
tbody.appendChild(tr);
}
table.appendChild(thead);
table.appendChild(tbody);
document.getElementById('tableContainer').appendChild(table);
}
function getDataAndHeadersBasedOnCondition() {
if (document.getElementById('conditionSelect').value === 'all') {
return [
[1, 2, 3],
[4, 5, 6],
[7, 8, 9]
], ['Header 1', 'Header 2', 'Header 3'];
} else if (document.getElementById('conditionSelect').value === 'modelA') {
return [
['A1', 'A2', 'A3'],
['A4', 'A5', 'A6'],
['A7', 'A8', 'A9']
], ['Model A Header 1', 'Model A Header 2', 'Model A Header 3'];
} else if (document.getElementById('conditionSelect').value === 'modelB') {
return [
['B1', 'B2', 'B3'],
['B4', 'B5', 'B6'],
['B7', <365>'B8', 'B9']
], ['Model B Header 1', 'Model B Header 2', 'Model B Header 3'];
}
}
document.getElementById('conditionSelect').addEventListener('change', () => {
const dataAndHeaders = getDataAndHeadersBasedOnCondition();
if (dataAndHeaders) {
const [data, headers] = dataAndHeaders;
renderTable(data, headers);
}
});
在这个示例中，我们定义了一个 renderTable 函数，它接受数据和表头作为参数，并使用这些参数动态创建一个表格。我们还定义了一个 getDataAndHeadersBasedOnCondition 函数，该函数根据用户选择的下拉菜单条件返回相应的数据和表头。我们为下拉菜单添加了一个事件监听器，以便在用户选择条件时调用 getDataAndHeadersBasedOnCondition 函数并渲染新的表格。
