前端下拉框聯動控制表格行顯示/隱藏實戰

需求

根據「污染物類型」下拉框選項，動態控制表格第 6-7 行的顯示內容：

• 選「降解型」→ 顯示「降解污染物排放量」「降解係數」
• 選「揮發型」→ 顯示「揮發污染物排放量」「揮發係數」

核心思路：tbody 分組 + ID 控制

將需動態切換的行包裹在獨立 <tbody> 中，賦予唯一 ID，通過 CSS display: none 初始隱藏，JS 切換顯示。

完整實現代碼

HTML 結構

<select id="pollutantType" onchange="toggleRows(this.value)">
    <option value="">請選擇污染物類型</option>
    <option value="degradable">降解型</option>
    <option value="volatile">揮發型</option>
</select>

<table id="dataTable">
    <thead>
        <tr><th>通用列 1</th><th>通用列 2</th></tr>
    </thead>
    <tbody id="fixedRows">
        <tr><td>固定行 1</td><td>數據</td></tr>
        <tr><td>固定行 2</td><td>數據</td></tr>
        <!-- 前 5 行固定顯示 -->
    </tbody>
    
    <!-- 動態行組，初始隱藏 -->
    <tbody id="degradableRows" style="display: none;">
        <tr><td>降解污染物排放量</td><td><input type="text"></td></tr>
        <tr><td>降解係數</td><td><input type="text"></td></tr>
    </tbody>
    
    <tbody id="volatileRows" style="display: none;">
        <tr><td>揮發污染物排放量</td><td><input type="text"></td></tr>
        <tr><td>揮發係數</td><td><input type="text"></td></tr>
    </tbody>
</table>

JavaScript 控制邏輯

<script>
function toggleRows(type) {
    // 獲取所有動態 tbody
    const degradable = document.getElementById('degradableRows');
    const volatile = document.getElementById('volatileRows');
    
    // 先全部隱藏
    degradable.style.display = 'none';
    volatile.style.display = 'none';
    
    // 根據選項顯示對應組
    switch (type) {
        case 'degradable':
            degradable.style.display = 'table-row-group'; // tbody 正確 display 值
            break;
        case 'volatile':
            volatile.style.display = 'table-row-group';
            break;
        default:
            // 未選擇時均隱藏
            break;
    }
}
</script>

關鍵技術點

進階：jQuery 簡寫版

$('#pollutantType').change(function() {
    const val = $(this).val();
    $('#degradableRows, #volatileRows').hide();
    if (val) $('#' + val + 'Rows').show(); // 命名規約：degradableRows, volatileRows
});

Vue/React 現代框架寫法提示

• Vue：v-if / v-show 綁定計算屬性或 data 狀態。
• React：條件渲染 {type === 'degradable' && <DegradableRows />}。

總結

tbody 分組 + ID 映射 + 切換 display 是原生 JS 實現表格局部行動態顯隱的最佳實踐。結構清晰、性能優、易擴展，無需操作 DOM 節點增刪，避免事件綁定丟失。