JavaScript实现下拉选择表格行触发行内编辑功能咨询

你现有代码存在三个核心问题：表格ID前后不统一、硬编码绑定固定行、未拆分编辑/确认状态的处理逻辑，按以下步骤修改即可满足需求。

修正HTML基础问题 #

首先统一标识、补全语法错误、补全操作按钮：

1. 统一表格ID为tabelleLKW，和你提供的Bootstrap表格代码保持一致，修正你原有JS中写为tableLKW的笔误
2. 补全表格中未闭合的标签：删除多余的style属性、匹配status列的闭合标签、补全所有单元格内<p>标签的闭合标记
3. 将下拉框选项的value改为对应的数据行索引（表格表头为第0行，第一行数据为第1行，10个选项value依次填1~10即可），新增编辑、确认按钮，适配Bootstrap样式

修改后的核心HTML代码如下：

<!-- 行选择下拉框+操作按钮 -->
<label for="table-rows">选择要编辑的表格行：</label>
<select name="table-rows" id="table-row" class="form-control d-inline-block w-auto mx-2">
    <option value="1">表格第1行</option>
    <option value="2">表格第2行</option>
    <option value="3">表格第3行</option>
    <option value="4">表格第4行</option>
    <option value="5">表格第5行</option>
    <option value="6">表格第6行</option>
    <option value="7">表格第7行</option>
    <option value="8">表格第8行</option>
    <option value="9">表格第9行</option>
    <option value="10">表格第10行</option>
</select>
<button id="editBtn" class="btn btn-primary mx-1">编辑</button>
<button id="confirmBtn" class="btn btn-success mx-1">确认</button>

<table id="tabelleLKW" class="table table-striped table-bordered table-dark">
    <thead class="thead-light"> 
        <tr>
            <th scope="col"><p align="center">position</p></th>
            <th scope="col"><p align="center">number</p></th>
            <th scope="col"><p align="center">driver's name</p></th>
            <th scope="col"><p align="center">vehicle identification</p></th>
            <th scope="col"><p align="center">status</p></th>
            <th scope="col"><p align="center">phone</p></th>
            <th scope="col"><p align="center">short code</p></th>
            <th scope="col"><p align="center">gate</p></th>
            <th scope="col"><p align="center">empties</p></th>
            <th scope="col"><p align="center">track</p></th>
            <th scope="col"><p align="center">priority</p></th>
            <th scope="col"><p align="center">from</p></th>
            <th scope="col"><p align="center">to</p></th>
        </tr>
    </thead>
    <tbody>
        <!-- 原有10行数据放在此处，注意补全所有未闭合的标签 -->
    </tbody>
</table>

编写JS交互逻辑 #

不需要针对每一行写单独的输入框class或冗余的if/else判断，通过全局变量记录当前编辑的行索引，遍历单元格统一处理即可：

// 记录当前正在编辑的行索引，确认时直接定位
let currentEditRow = null;

// 编辑按钮逻辑
document.getElementById('editBtn').addEventListener('click', () => {
    // 获取下拉框选中的行索引
    const selectValue = document.getElementById('table-row').value;
    currentEditRow = parseInt(selectValue);
    // 获取目标行所有单元格
    const cells = document.getElementById('tabelleLKW').rows[currentEditRow].cells;

    // 遍历单元格插入输入框，原有内容作为placeholder提示
    for(let i = 0; i < cells.length; i++) {
        const originVal = cells[i].textContent.trim();
        cells[i].innerHTML = `<input type="text" class="form-control edit-input" placeholder="原值：${originVal}">`;
    }
});

// 确认按钮逻辑
document.getElementById('confirmBtn').addEventListener('click', () => {
    // 未进入编辑状态时点击确认直接返回
    if(currentEditRow === null) return;
    const cells = document.getElementById('tabelleLKW').rows[currentEditRow].cells;

    // 遍历单元格处理输入值
    for(let i = 0; i < cells.length; i++) {
        const input = cells[i].querySelector('.edit-input');
        if(!input) continue;
        const inputVal = input.value.trim();

        if(inputVal) {
            // 输入非空：用输入值覆盖原有内容
            cells[i].innerHTML = `<p align="center">${inputVal}</p>`;
        } else {
            // 输入为空：恢复原有内容
            const originVal = input.placeholder.replace('原值：', '');
            cells[i].innerHTML = `<p align="center">${originVal}</p>`;
        }
    }

    // 清空编辑状态标记
    currentEditRow = null;
});

逻辑说明 #

• 下拉选项直接存储行索引，不需要额外判断选项ID，后续新增行只需补全下拉选项即可，无需修改JS逻辑
• 输入框复用Bootstrap自带的form-control样式，不需要额外写CSS即可匹配整体UI
• 原有内容放在输入框placeholder中，用户无需重复输入不需要修改的字段，留空即保留原值，完全匹配需求
• 增加防御性判断，避免未点编辑直接点确认时的报错

注意：如果后续需要支持同时编辑多行，只需要把currentEditRow改成数组存储多个行索引即可，当前逻辑为单选编辑模式，匹配下拉单选的交互设计。

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