点击按钮在现有表格下方展开新表格的实现方案

实现思路 #

在目标行后插入默认隐藏的扩展行，利用原生JavaScript监听按钮点击事件，切换扩展行的显示/隐藏状态，同时通过colspan属性保证子表格与原表格等宽，展开时自动推送下方内容。

1. 调整后的HTML结构（已翻译为中文） #

<table>
    <tr>
        <th></th>
        <th>供应商</th>
        <th>原始交货日期</th>
        <th>交货ID</th>
    </tr>
    <!-- 第一行（延迟交货） -->
    <tr class="new_tr verspaetet">
        <td><input type="image" src="./img/down-arrow.png" class="expand-btn" alt="展开"/></td>
        <td>穆勒有限公司</td>
        <td>2022.10.20</td>
        <td>12384123</td>
    </tr>
    <!-- 第一行的扩展子表格 -->
    <tr class="expandable-row">
        <td colspan="4">
            <table class="sub-table">
                <tr>
                    <th>延迟原因</th>
                    <th>新交货日期</th>
                    <th>联系人</th>
                </tr>
                <tr>
                    <td>物流延误</td>
                    <td>2022.10.25</td>
                    <td>汉斯·穆勒</td>
                </tr>
            </table>
        </td>
    </tr>
    <!-- 第二行 -->
    <tr class="new_tr">
        <td><input type="image" src="./img/down-arrow.png" class="expand-btn" alt="展开"/></td>
        <td>水务有限公司</td>
        <td>今日</td>
        <td>12385533</td>
    </tr>
    <tr class="expandable-row">
        <td colspan="4">
            <table class="sub-table">
                <tr>
                    <th>配送方式</th>
                    <th>预计送达时间</th>
                </tr>
                <tr>
                    <td>标准快递</td>
                    <td>14:00-16:00</td>
                </tr>
            </table>
        </td>
    </tr>
    <!-- 第三行 -->
    <tr class="new_tr">
        <td><input type="image" src="./img/down-arrow.png" class="expand-btn" alt="展开"/></td>
        <td>烧烤用品有限公司</td>
        <td>今日</td>
        <td>94728544</td>
    </tr>
    <tr class="expandable-row">
        <td colspan="4">
            <table class="sub-table">
                <tr>
                    <th>商品明细</th>
                    <th>数量</th>
                </tr>
                <tr>
                    <td>木炭</td>
                    <td>10袋</td>
                </tr>
                <tr>
                    <td>烤架配件</td>
                    <td>1套</td>
                </tr>
            </table>
        </td>
    </tr>
    <!-- 剩余行按上述结构复制即可 -->
</table>

2. CSS样式设置 #

/* 主表格基础样式 */
table {
    width: 100%;
    border-collapse: collapse;
    margin: 20px 0;
    font-size: 14px;
}
th, td {
    border: 1px solid #ddd;
    padding: 8px;
    text-align: left;
}
th {
    background-color: #f2f2f2;
}

/* 扩展行初始隐藏 */
.expandable-row {
    display: none;
}

/* 子表格与主表格等宽 */
.sub-table {
    width: 100%;
    border-collapse: collapse;
    margin: 10px 0;
}
.sub-table th {
    background-color: #e8f4f8;
}

3. 原生JavaScript逻辑 #

const mainTable = document.querySelector('table');

// 事件委托监听按钮点击
mainTable.addEventListener('click', function(e) {
    if (e.target.classList.contains('expand-btn')) {
        const parentRow = e.target.closest('.new_tr');
        const expandRow = parentRow.nextElementSibling;
        
        // 切换扩展行显示状态
        if (expandRow.style.display === 'table-row') {
            expandRow.style.display = 'none';
            e.target.src = './img/down-arrow.png';
            e.target.alt = '展开';
        } else {
            expandRow.style.display = 'table-row';
            e.target.src = './img/up-arrow.png'; // 需准备对应向上箭头图片
            e.target.alt = '收起';
        }
    }
});

核心要点 #

• 事件委托：避免给每个按钮单独绑定事件，适配动态生成的行，提升性能。
• colspan对齐：扩展行单元格设置colspan="4"（与主表格列数一致），确保子表格宽度完全匹配主表格。
• 无依赖实现：全程使用原生HTML/CSS/JavaScript，无需任何第三方库或框架。
• 交互优化：切换箭头图标，让用户直观感知当前展开/收起状态。

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