前端动态可编辑表格代码实现

一、实现目标

1、表格行可以动态增减

2、表格内容可编辑

3、表格内容可获取

二、效果展示

效果图如下：可以实现行动态添加、删除，同时可以实现表格内容编辑和内容获取。

三、代码实现

1、html展示代码如下：

<div class="param-table">
    <!-- Vue风格的可编辑表格 -->
    <div class="el-table el-table--border el-table--striped">
        <div class="el-table__header-wrapper">
            <table style="width: 100%">
                <thead>
                <tr class="el-table__header">
                    <th style="width: 40%;">Key</th>
                    <th style="width: 40%;">Value</th>
                    <th style="width: 20%;">操作</th>
                </tr>
                </thead>
                <tbody id="http-params-table">
                <tr id="param-row-1">
                    <td data-type="key" contenteditable="true"></td>
                    <td data-type="value" contenteditable="true"></td>
                    <td >
                        <div class="cell">
                            <button class="el-button el-button--danger el-button--mini el-button--text" onclick="deleteParamRow('param-row-1')">
                                <i class="el-icon-delete"></i> 删除
                            </button>
                        </div>
                    </td>
                </tr>
                <tr id="param-row-2">
                    <td data-type="key" contenteditable="true"></td>
                    <td data-type="value" contenteditable="true"></td>
                    <td >
                        <div class="cell">
                            <button class="el-button el-button--danger el-button--mini el-button--text" onclick="deleteParamRow('param-row-2')">
                                <i class="el-icon-delete"></i> 删除
                            </button>
                        </div>
                    </td>
                </tr>
                <tr id="param-row-3">
                    <td data-type="key" contenteditable="true"></td>
                    <td data-type="value" contenteditable="true"></td>
                    <td >
                        <div class="cell">
                            <button class="el-button el-button--danger el-button--mini el-button--text" onclick="deleteParamRow('param-row-3')">
                                <i class="el-icon-delete"></i> 删除
                            </button>
                        </div>
                    </td>
                </tr>
                </tbody>
            </table>
        </div>
    </div>
    <div class="param-table-actions" style="margin-top: 10px; text-align: center;">
        <button class="el-button el-button--primary el-button--small" onclick="addParamRow()">
            <i class="el-icon-plus"></i> 添加参数
        </button>
        <button class="el-button el-button--small" onclick="clearAllParams()" style="margin-left: 10px;">
            清空所有
        </button>
    </div>
</div>

2、JS表格控制

（1）动态新增行

// 添加参数行
function addParamRow() {
    const tableBody = document.getElementById('http-params-table');
    if (!tableBody) return;

    const rowId = 'param-row-' + paramRowCounter++;
    const row = document.createElement('tr');
    row.id = rowId;
    //row.className = 'el-table__row';

    // Key单元格
    const keyCell = document.createElement('td');
    keyCell.setAttribute('contenteditable', 'true');
    keyCell.setAttribute('data-type', 'key');

    // Value单元格
    const valueCell = document.createElement('td');
    valueCell.setAttribute('contenteditable', 'true');
    valueCell.setAttribute('data-type', 'value');


    // 操作单元格
    const actionCell = document.createElement('td');
    actionCell.innerHTML = `<div class="cell">
        <button class="el-button el-button--danger el-button--mini el-button--text" onclick="deleteParamRow('${rowId}')">
            <i class="el-icon-delete"></i> 删除
        </button>
    </div>`;

    // 添加单元格到行
    row.appendChild(keyCell);
    row.appendChild(valueCell);
    row.appendChild(actionCell);

    // 添加行到表格
    tableBody.appendChild(row);
}

（2）、删除行

// 删除参数行
function deleteParamRow(rowId) {
    const row = document.getElementById(rowId);
    if (row) {
        row.parentNode.removeChild(row);

        // 如果表格为空，添加一个新行
        const tableBody = document.getElementById('http-params-table');
        if (tableBody && tableBody.children.length === 0) {
            addParamRow();
        }
    }
}

（3）、获取表格内容

// 获取参数表格数据
function getParamsData() {
    const tableBody = document.getElementById('http-params-table');
    const rows = tableBody.children;
    const params = {};
    for (let i = 0; i < rows.length; i++) {
        const row = rows[i];
        const keyCell = row.querySelector('[data-type="key"]');
        const valueCell = row.querySelector('[data-type="value"]');
        const key = keyCell.textContent.trim();
        const value = valueCell.textContent.trim();
        if (key) {
            params[key] = value;
        }
    }
    return params;
}

创作不易，点点关注！！！