下拉框切换表格内容的HTML维修表单故障排查

常见遗漏点 #

• 事件监听未正确绑定：下拉框的change事件没挂到对应的DOM元素上，导致选择型号后根本没触发数据渲染逻辑。检查是否有类似document.getElementById('model-select').addEventListener('change', renderParts)的代码，且确保DOM加载完成后再执行绑定（比如把JS放在</body>前，或者用DOMContentLoaded事件包裹）。
• 数据匹配逻辑错误：硬编码的零件数据中，型号匹配的字段不对应。比如你的零件数据是{ model: 'iPhone13', newPart: '屏幕总成', usedPart: '拆机屏幕' }，但渲染时误判成item.device === selectedModel，导致筛选不到任何数据。
• 表格DOM操作错误：
  • 错误获取表格容器，比如把tbody写成了table，或者ID拼写错误；
  • 创建表格行/单元格后，没有把它们添加到DOM中（比如只创建了<tr>但没调用tbody.appendChild(tr)）；
  • 使用innerHTML拼接时出现语法错误，比如引号嵌套错误导致HTML失效。

可运行的Demo示例 #

以下是纯本地运行的完整代码，硬编码数据，实现下拉选型号后渲染零件表格：

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>维修零件表单</title>
    <style>
        table { border-collapse: collapse; margin: 20px 0; }
        th, td { border: 1px solid #ddd; padding: 8px; }
        th { background-color: #f2f2f2; }
    </style>
</head>
<body>
    <label>选择设备型号：</label>
    <select id="model-select">
        <option value="">请选择型号</option>
        <option value="iPhone13">iPhone 13</option>
        <option value="iPhone14">iPhone 14</option>
    </select>

    <h3>新零件列表</h3>
    <table id="new-parts-table">
        <thead>
            <tr><th>零件名称</th><th>价格</th></tr>
        </thead>
        <tbody id="new-parts-body"></tbody>
    </table>

    <h3>拆机件列表</h3>
    <table id="used-parts-table">
        <thead>
            <tr><th>零件名称</th><th>价格</th></tr>
        </thead>
        <tbody id="used-parts-body"></tbody>
    </table>

    <script>
        // 硬编码零件数据
        const partsData = [
            {
                model: 'iPhone13',
                newParts: [
                    { name: '原装屏幕总成', price: '1299元' },
                    { name: '原装电池', price: '599元' }
                ],
                usedParts: [
                    { name: '拆机屏幕总成', price: '699元' },
                    { name: '拆机电池', price: '299元' }
                ]
            },
            {
                model: 'iPhone14',
                newParts: [
                    { name: '原装屏幕总成', price: '1499元' },
                    { name: '原装电池', price: '699元' }
                ],
                usedParts: [
                    { name: '拆机屏幕总成', price: '899元' },
                    { name: '拆机电池', price: '399元' }
                ]
            }
        ];

        // 获取DOM元素
        const modelSelect = document.getElementById('model-select');
        const newPartsBody = document.getElementById('new-parts-body');
        const usedPartsBody = document.getElementById('used-parts-body');

        // 渲染表格函数
        function renderParts(selectedModel) {
            // 清空之前的内容
            newPartsBody.innerHTML = '';
            usedPartsBody.innerHTML = '';

            // 匹配对应型号的零件数据
            const modelParts = partsData.find(item => item.model === selectedModel);
            if (!modelParts) return;

            // 渲染新零件
            modelParts.newParts.forEach(part => {
                const tr = document.createElement('tr');
                tr.innerHTML = `<td>${part.name}</td><td>${part.price}</td>`;
                newPartsBody.appendChild(tr);
            });

            // 渲染拆机件
            modelParts.usedParts.forEach(part => {
                const tr = document.createElement('tr');
                tr.innerHTML = `<td>${part.name}</td><td>${part.price}</td>`;
                usedPartsBody.appendChild(tr);
            });
        }

        // 绑定下拉框change事件
        modelSelect.addEventListener('change', function() {
            renderParts(this.value);
        });
    </script>
</body>
</html>

关于本地CSV读取的补充 #

本地运行时直接读取本地CSV文件会受浏览器同源策略限制，无法直接通过fetch('data.csv')读取。可以改用FileReader API让用户手动上传CSV文件来加载数据，示例逻辑如下：

// 添加文件上传控件
// <input type="file" id="csv-upload" accept=".csv">

const csvUpload = document.getElementById('csv-upload');
csvUpload.addEventListener('change', function(e) {
    const file = e.target.files[0];
    if (!file) return;

    const reader = new FileReader();
    reader.onload = function(event) {
        const csvText = event.target.result;
        // 解析CSV文本为数组（这里需要简单的CSV解析逻辑，或用轻量库）
        const rows = csvText.split('\n').map(row => row.split(','));
        // 将解析后的数据替换掉硬编码的partsData
        console.log('解析后的CSV数据：', rows);
    };
    reader.readAsText(file);
});

内容的提问来源于stack exchange，提问作者Joshua Bishop