HTML与JavaScript实现下拉菜单驱动的动态表格：构建交互式维修表单-js教程-PHP中文网

HTML与JavaScript实现下拉菜单驱动的动态表格：构建交互式维修表单

本文详细介绍了如何使用html和纯javascript构建一个动态维修表单，通过下拉菜单实时筛选并展示兼容零件信息。核心内容包括修正下拉菜单值绑定错误、采用现代javascript变量声明（`const`/`let`）、优化用户体验的默认选项，以及动态渲染和更新表格数据的实现方法，旨在帮助开发者构建高效且交互性强的web表单。

在Web开发中，根据用户选择动态更新页面内容是一种常见的需求。例如，在一个维修表单中，用户选择一个设备型号后，系统应自动显示该型号兼容的新零件和旧零件列表。本教程将深入探讨如何使用HTML、CSS和纯JavaScript实现这一功能，解决在开发过程中可能遇到的数据绑定和页面更新问题。

核心问题分析：下拉菜单值绑定与数据筛选

最初的问题在于，尽管表单结构和JavaScript逻辑已初步搭建，但当用户通过“Model”下拉菜单选择型号时，相关的零件表格并未正确显示数据，除了表头之外没有任何内容。经过分析，主要原因出在下拉菜单的option元素值绑定不正确。

在populateDropdowns函数中，为model下拉菜单创建选项时，option.value被错误地赋值为item[0]（即品牌名称），而实际需要的是item[2]（即型号名称），因为后续的零件数据筛选逻辑是基于型号名称进行的。

修正前的代码片段：

立即学习“Java免费学习笔记（深入）”；

// ...
modelData.forEach(function (item) {
    var option = document.createElement('option');
    option.value = item[0]; // 错误：这里应为 item[2] (型号)
    option.text = item[0] + " - " + item[1] + " - " + item[2];
    modelDropdown.appendChild(option);
});
// ...

登录后复制

修正后的代码片段：

// ...
modelData.forEach(function (item) {
    const option = document.createElement('option');
    option.value = item[2]; // 正确：绑定型号名称
    option.text = item[0] + " - " + item[1] + " - " + item[2];
    modelDropdown.appendChild(option);
});
// ...

登录后复制

通过将option.value正确地设置为item[2]，当用户选择某个型号时，populateTables函数就能获取到正确的型号值，并据此筛选出兼容的零件数据。

JavaScript 数据管理与变量声明优化

在现代JavaScript开发中，推荐使用const和let替代传统的var进行变量声明，以提升代码的可读性和维护性。

const：用于声明常量，一旦赋值后不能再重新赋值。适用于那些在程序运行期间不会改变的数据，例如本例中的skuData、modelData、newPartsData和salvagePartsData。
let：用于声明块级作用域的变量，可以重新赋值。适用于那些在函数或代码块内部可能需要更新的变量。

优化后的数据声明示例：

音疯

音疯是昆仑万维推出的一个AI音乐创作平台，每日可以免费生成6首歌曲。

178

查看详情

// SKU data (常量)
const skuData = [
    ["SKU1", "Description 1", "Value 1"],
    ["SKU2", "Description 2", "Value 2"],
    ["SKU3", "Description 3", "Value 3"]
];

// Model data (常量)
const modelData = [
    ["Brand 1", "Gen 1", "Model 1"],
    ["Brand 2", "Gen 2", "Model 2"],
    ["Brand 3", "Gen 3", "Model 3"]
];

// New parts data (常量)
const newPartsData = [
    ["Part 1", "10", "5", "Model 1,Model 2"],
    ["Part 2", "20", "3", "Model 1,Model 3"],
    ["Part 3", "30", "2", "Model 2,Model 3"]
];

// Salvaged parts data (常量)
const salvagePartsData = [
    ["Part 4", "15", "4", "Model 1,Model 3"],
    ["Part 5", "25", "6", "Model 2,Model 3"],
    ["Part 6", "35", "2", "Model 1,Model 2"]
];

登录后复制

在函数内部，如populateDropdowns、populateTables和checkValue中，局部变量也应相应地使用let或const。

动态表格渲染：populateTables 函数详解

populateTables 函数是实现动态内容更新的核心。它的主要职责是根据用户在“Model”下拉菜单中的选择，清空并重新填充“New Parts”和“Salvaged Parts”表格。

获取选中值：通过document.getElementById('model').value获取当前选中的型号。

清空表格：在填充新数据之前，通过设置innerHTML来清空表格的现有内容，并重新添加表头。这样做可以确保每次更新时表格都是干净的。

newPartsTable.innerHTML = "<thead><tr><th>Part</th><th>Quantity</th><th>Select</th></tr></thead><tbody>";
salvagePartsTable.innerHTML = "<thead><tr><th>Part</th><th>Quantity</th><th>Select</th></tr></thead><tbody>";

登录后复制

数据筛选与渲染：

遍历相应的零件数据数组（newPartsData或salvagePartsData）。
使用item[3].includes(modelSelection)来判断当前零件是否与选定的型号兼容。item[3]存储的是兼容型号的字符串，例如"Model 1,Model 2"，includes()方法可以有效地检查其中是否包含modelSelection。
如果兼容，则动态创建、元素，并设置其textContent。
为每个零件添加一个input type="checkbox"，允许用户选择。
将创建的行及其子元素添加到对应的表格中。

业务逻辑：checkValue 函数

checkValue 函数负责根据用户选择的零件计算总价值，并根据该总价值与SKU值的比较结果，动态更新提交按钮的样式和文本。

获取SKU值：从SKU下拉菜单获取选定的SKU值。
遍历选中的零件：
- 通过document.getElementsByName('new_parts[]')和document.getElementsByName('salvaged_parts[]')获取所有零件复选框。
- 遍历这些复选框，检查checked属性以确定哪些零件被选中。
- 对于每个选中的零件，根据其value（零件名称）在对应的newPartsData或salvagePartsData中查找其价值（item[1]），并累加到totalValue。
更新按钮样式：根据totalValue与skuValue的比较结果，动态添加或移除CSS类（green-button或red-button），并更新按钮文本为“Pass”或“Nix”。

HTML 结构与用户体验优化

为了提升用户体验和代码的语义化，建议对HTML结构进行以下优化：

默认下拉选项：在model下拉菜单中添加一个默认的“请选择型号”选项，避免页面加载时自动选择第一个型号导致表格立即显示数据，给用户一个明确的初始状态。
```
<select id="model" name="model" required onchange="populateTables()">
  <option value="">请选择型号</option> 
</select>
```
登录后复制
避免滥用
：使用CSS（如margin、padding、flexbox或grid）来控制表单元素的间距和布局，而不是频繁使用
标签。这使得布局更灵活，样式更容易管理。

完整HTML结构示例：

<!DOCTYPE html>
<html>
<head>
    <title>Repair Form</title>
    <style>
        /* CSS样式将在下面单独展示 */
    </style>
</head>
<body onload="populateDropdowns()">
    <h1>维修表单</h1>
    <form>
        <label for="technician">技术员:</label>
        <input type="text" id="technician" name="technician" required>

        <label for="sku">SKU:</label>
        <select id="sku" name="sku" required></select>

        <label for="serial">序列号:</label>
        <input type="text" id="serial" name="serial" required>

        <label for="model">型号:</label>
        <select id="model" name="model" required onchange="populateTables()">
          <option value="">请选择型号</option>
        </select>

        <h2>新零件</h2>
        <table class="table" id="new-parts-table"></table>

        <h2>旧零件</h2>
        <table class="table" id="salvaged-parts-table"></table>

        <input type="submit" value="提交" id="submit-button" onclick="checkValue()">
    </form>
</body>
</html>

登录后复制

CSS 样式

为了使表单和表格具有良好的视觉效果，可以使用以下CSS样式。

form {
  display: flex;
  flex-direction: column;
  gap: 10px; /* 使用gap代替<br/>来创建间距 */
  width: 250px;
}

.table {
  border-collapse: collapse;
  width: 100%; /* 使表格宽度适应容器 */
}

.table th,
.table td {
  border: 1px solid black;
  padding: 5px;
  text-align: left; /* 文本左对齐 */
}

.green-button {
  background-color: green;
  color: white;
  padding: 10px 20px;
  font-size: 16px;
  border: none;
  cursor: pointer;
}

.red-button {
  background-color: red;
  color: white;
  padding: 10px 20px;
  font-size: 16px;
  border: none;
  cursor: pointer;
}

登录后复制

完整代码示例

将上述HTML、CSS和JavaScript整合，形成一个完整的本地可运行的维修表单。

<!DOCTYPE html>
<html>
<head>
    <title>维修表单</title>
    <style>
        form {
          display: flex;
          flex-direction: column;
          gap: 10px;
          width: 300px; /* 调整表单宽度 */
          padding: 20px;
          border: 1px solid #ccc;
          border-radius: 8px;
          margin: 20px auto; /* 居中显示 */
          box-shadow: 0 2px 4px rgba(0,0,0,0.1);
        }

        label {
            font-weight: bold;
            margin-bottom: 5px;
        }

        input[type="text"],
        select {
            padding: 8px;
            border: 1px solid #ddd;
            border-radius: 4px;
            font-size: 14px;
            width: 100%;
            box-sizing: border-box; /* 确保padding和border不增加宽度 */
        }

        h2 {
            margin-top: 20px;
            margin-bottom: 10px;
            font-size: 1.2em;
            color: #333;
        }

        .table {
            border-collapse: collapse;
            width: 100%;
            margin-bottom: 15px;
        }

        .table th,
        .table td {
            border: 1px solid #ccc;
            padding: 8px;
            text-align: left;
        }

        .table th {
            background-color: #f2f2f2;
        }

        .green-button {
            background-color: #4CAF50; /* 绿色 */
            color: white;
            padding: 10px 20px;
            font-size: 16px;
            border: none;
            border-radius: 5px;
            cursor: pointer;
            transition: background-color 0.3s ease;
        }

        .green-button:hover {
            background-color: #45a049;
        }

        .red-button {
            background-color: #f44336; /* 红色 */
            color: white;
            padding: 10px 20px;
            font-size: 16px;
            border: none;
            border-radius: 5px;
            cursor: pointer;
            transition: background-color 0.3s ease;
        }

        .red-button:hover {
            background-color: #da190b;
        }

        input[type="submit"] {
            margin-top: 20px;
            width: auto; /* 按钮宽度自适应内容 */
            align-self: flex-start; /* 按钮左对齐 */
        }
    </style>
<script>
    // SKU data
    const skuData = [
        ["SKU1", "描述 1", "值 1"],
        ["SKU2", "描述 2", "值 2"],
        ["SKU3", "描述 3", "值 3"]
    ];

    // Model data
    const modelData = [
        ["品牌 1", "代数 1", "Model 1"],
        ["品牌 2", "代数 2", "Model 2"],
        ["品牌 3", "代数 3", "Model 3"]
    ];

    // New parts data
    const newPartsData = [
        ["零件 1", "10", "5", "Model 1,Model 2"],
        ["零件 2", "20", "3", "Model 1,Model 3"],
        ["零件 3", "30", "2", "Model 2,Model 3"]
    ];

    // Salvaged parts data
    const salvagePartsData = [
        ["零件 4", "15", "4", "Model 1,Model 3"],
        ["零件 5", "25", "6", "Model 2,Model 3"],
        ["零件 6", "35", "2", "Model 1,Model 2"]
    ];

    function populateDropdowns() {
        const skuDropdown = document.getElementById('sku');
        const modelDropdown = document.getElementById('model');

        // Populate SKU dropdown
        skuData.forEach(function (item) {
            const option = document.createElement('option');
            option.value = item[0];
            option.text = item[1] + " - " + item[2];
            skuDropdown.appendChild(option);
        });

        // Populate Model dropdown
        modelData.forEach(function (item) {
            const option = document.createElement('option');
            option.value = item[2]; // 修正：绑定型号名称
            option.text = item[0] + " - " + item[1] + " - " + item[2];
            modelDropdown.appendChild(option);
        });

        // Initial population of tables (如果默认选项有值，则会触发)
        // 如果“请选择型号”是默认选中且value为空，则这里不会显示任何零件
        populateTables();
    }

    function populateTables() {
        const modelSelection = document.getElementById('model').value;

        // Populate New Parts table
        const newPartsTable = document.getElementById('new-parts-table');
        // 清空现有内容并添加表头
        newPartsTable.innerHTML = "<thead><tr><th>零件</th><th>数量</th><th>选择</th></tr></thead><tbody></tbody>";
        const newPartsTableBody = newPartsTable.querySelector('tbody');

        if (modelSelection) { // 仅当选择了型号时才填充表格
            newPartsData.forEach(function (item) {
                if (item[3].includes(modelSelection)) {
                    const row = document.createElement('tr');
                    const partCell = document.createElement('td');
                    partCell.textContent = item[0];
                    row.appendChild(partCell);
                    const quantityCell = document.createElement('td');
                    quantityCell.textContent = item[2];
                    row.appendChild(quantityCell);
                    const selectCell = document.createElement('td');
                    const checkbox = document.createElement('input');
                    checkbox.type = 'checkbox';
                    checkbox.name = 'new_parts[]';
                    checkbox.value = item[0];
                    selectCell.appendChild(checkbox);
                    row.appendChild(selectCell);
                    newPartsTableBody.appendChild(row);
                }
            });
        }


        // Populate Salvaged Parts table
        const salvagePartsTable = document.getElementById('salvaged-parts-table');
        // 清空现有内容并添加表头
        salvagePartsTable.innerHTML = "<thead><tr><th>零件</th><th>数量</th><th>选择</th></tr></thead><tbody></tbody>";
        const salvagePartsTableBody = salvagePartsTable.querySelector('tbody');

        if (modelSelection) { // 仅当选择了型号时才填充表格
            salvagePartsData.forEach(function (item) {
                if (item[3].includes(modelSelection)) {
                    const row = document.createElement('tr');
                    const partCell = document.createElement('td');
                    partCell.textContent = item[0];
                    row.appendChild(partCell);
                    const quantityCell = document.createElement('td');
                    quantityCell.textContent = item[2];
                    row.appendChild(quantityCell);
                    const selectCell = document.createElement('td');
                    const checkbox = document.createElement('input');
                    checkbox.type = 'checkbox';
                    checkbox.name = 'salvaged_parts[]';
                    checkbox.value = item[0];
                    selectCell.appendChild(checkbox);
                    row.appendChild(selectCell);
                    salvage

登录后复制

以上就是HTML与JavaScript实现下拉菜单驱动的动态表格：构建交互式维修表单的详细内容，更多请关注php中文网其它相关文章！