点击编辑按钮时如何让表格对应行的Select Input下拉框显示？

实现方案 #

核心逻辑为基于点击按钮所在的当前行操作元素，避免全局获取元素仅作用在第一行的问题，具体实现步骤如下： #

1. 新增CSS控制显隐

先添加简单的样式类控制元素隐藏状态：

.hidden {
  display: none !important;
}

2. 修改HTML默认结构

可编辑列同时存放静态文本容器和下拉框，默认隐藏下拉框、展示静态文本：

<tr>
  <td scope="row" class='zeroCol'>1</td>
  <td class='primeiraCol'>teste</td>
  <!-- 第一个可编辑列修改 -->
  <td class='segundaCol'>
    <span class="static-text">Liberação de Acesso</span>
    <label for="setorSelect" class="hidden"></label>
    <select name="urgencias" class='selectTotal hidden'>
      <option value="Liberação de Acesso">Liberação de Acesso</option>
      <option value="Sistema Lento">Sistema Lento</option>
      <option value="Problema">Problema</option>
    </select>
  </td>
  <td class='terceiraCol'>teste</td>
  <!-- 第二个可编辑列修改 -->
  <td class='quartaCol'>
    <span class="static-text">Liberação de Acesso</span>
    <label for="tipoSelect" class="hidden"></label>
    <select name="urgencias" class='selectTotal hidden'>
      <option value="Liberação de Acesso">Liberação de Acesso</option>
      <option value="Sistema Lento">Sistema Lento</option>
      <option value="Problema">Problema</option>
    </select>
  </td>
  <td class='quintaCol'>Aberto</td>
  <td class='sextaCol'></td>
  <td class='setimaCol'>uuuuu</td>
  <td class='oitavaCol'><textarea name="name" rows="2" cols="40" readonly>Salvar Chat dia José Pode fazer o favor de verificar para liberar o acesso da pasta PCP no computador do lider André . precisa de alguma liberação do Diego ? Att Sabrina</textarea></td>
  <td class='nonaCol'>
    <button type="button" class="btn btn-success acoes-botao salvar">Salvar</button>
    <button type="button" class="btn btn-success acoes-botao">Chat</button>
    <button type="button" class="btn btn-success acoes-botao editar">Editar</button>
    <button type="button" class="btn btn-danger acoes-botao">Aprovação</button>
  </td>
</tr>

说明：给保存按钮新增了salvar类方便绑定事件，可编辑列的静态文本统一放在static-text类的span容器中。 #

3. 替换JS逻辑

// 绑定所有编辑按钮点击事件
document.querySelectorAll('.editar').forEach(editBtn => {
  editBtn.addEventListener('click', e => {
    // 获取当前点击按钮所属的行
    const currentRow = e.target.closest('tr');
    // 切换当前行可编辑区域状态：隐藏文本、显示下拉框
    currentRow.querySelectorAll('.static-text').forEach(text => text.classList.add('hidden'));
    currentRow.querySelectorAll('.selectTotal').forEach(select => select.classList.remove('hidden'));
  })
})

// 绑定所有保存按钮点击事件
document.querySelectorAll('.salvar').forEach(saveBtn => {
  saveBtn.addEventListener('click', e => {
    const currentRow = e.target.closest('tr');
    // 遍历当前行所有下拉框
    currentRow.querySelectorAll('.selectTotal').forEach((select, index) => {
      const selectedVal = select.value;
      // 更新对应静态文本内容
      const textEl = currentRow.querySelectorAll('.static-text')[index];
      textEl.textContent = selectedVal;
      // 切换回静态文本展示状态
      textEl.classList.remove('hidden');
      select.classList.add('hidden');
    })
  })
})

逻辑说明 #

• 点击编辑按钮时仅操作当前行元素，不会影响其他行的展示和状态
• 不需要写多分支if判断下拉框的值，直接获取选中值赋值给静态文本即可，可编辑列逻辑可复用
• 支持表格有多行数据的场景，每行编辑、保存逻辑互不干扰

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