点击按钮编辑表格单元格及行内div独立显示问题求助

1. 如何通过点击按钮编辑表格中的单元格？ #

实现这个功能的核心思路是：点击编辑按钮时，把目标单元格的静态文本替换为可编辑的输入组件（比如input或textarea），编辑完成后（比如点击确认、失去焦点或按回车），再将输入内容替换回单元格文本，还可以按需把修改提交到后端。

给你一个简单易上手的实现示例：

<table class="table" id="edit-table">
  <tr>
    <th>SNO</th>
    <th>Task</th>
    <th>Actions</th>
  </tr>
  <tr>
    <td>1</td>
    <td class="editable-cell">完成用户需求分析</td>
    <td><button onclick="startEdit(this)">编辑</button></td>
  </tr>
  <tr>
    <td>2</td>
    <td class="editable-cell">设计数据库结构</td>
    <td><button onclick="startEdit(this)">编辑</button></td>
  </tr>
</table>

<script>
function startEdit(button) {
  // 找到按钮所在的行和要编辑的单元格
  const row = button.closest('tr');
  const cell = row.querySelector('.editable-cell');
  const originalText = cell.textContent.trim();

  // 创建输入框
  const input = document.createElement('input');
  input.type = 'text';
  input.value = originalText;
  input.classList.add('edit-input');

  // 替换单元格内容为输入框
  cell.innerHTML = '';
  cell.appendChild(input);
  input.focus();

  // 失去焦点时保存修改
  input.addEventListener('blur', function() {
    const newText = this.value.trim() || originalText;
    cell.textContent = newText;
    // 这里可以添加提交到后端的逻辑，比如用fetch发送请求
    console.log('修改后的内容:', newText);
  });

  // 按回车键也保存修改
  input.addEventListener('keydown', function(e) {
    if (e.key === 'Enter') {
      this.blur();
    }
  });
}
</script>

<style>
.edit-input {
  width: 100%;
  padding: 4px;
  box-sizing: border-box;
}
</style>

2. 点击图标仅显示第一行div的问题解决方法 #

问题根源 #

你碰到的问题核心是重复使用了同一个id="panel"。HTML规范里id必须是页面唯一的，当你用document.getElementById("panel")时，浏览器只会返回第一个匹配该id的元素，所以不管点哪一行的图标，都只会显示第一行的panel。

两种可行的解决办法 #

方案一：通过DOM遍历定位当前行的panel

不需要修改太多HTML，利用按钮的位置关系找到对应行的panel即可，灵活性更强：
修改后的HTML（仅调整按钮事件和panel的标识）：

<table class="table" id="tab_logic">
  <tr>
    <th>SNO</th>
    <th>Task</th>
    <th>Comments</th>
    <th>Edit</th>
  </tr>
  <% for(var i=0; i < status_info.length; i++) { %>
  <tr>
    <td><%= i+1 %></td>
    <td><%= status_info[i].Task_Name %></td>
    <td>
      <%- status_info[i].Cmnt_Details %>
      <div class="panel"> <!-- 把id改成class，避免重复 -->
        <form action="/StatusData" method="POST">
          <p></p>
          <textarea placeholder="write something..." name="aa"></textarea>
        </form>
      </div>
    </td>
    <td><input type="image" src="/Images/edit.png" alt="button" style="width: 20px" onclick="myFunction(this)"></td>
  </tr>
  <% } %>
</table>

修改后的JS和CSS：

<style>
.panel { display: none; } /* 用class选择器匹配所有panel */
</style>
<script>
function myFunction(button) {
  // 先找到按钮所在的行，再在行内找对应的panel
  const row = button.closest('tr');
  const panel = row.querySelector('.panel');
  panel.style.display = "block";
  console.log("hi")
}
</script>

方案二：给每个panel设置唯一ID

利用循环索引给每个panel生成唯一id，点击时传入索引定位：
HTML部分：

<!-- 循环内的内容调整 -->
<td>
  <%- status_info[i].Cmnt_Details %>
  <div id="panel-<%= i %>"> <!-- 生成唯一id -->
    <form action="/StatusData" method="POST">
      <p id="demo-<%= i %>"></p>
      <textarea placeholder="write something..." id="aa-<%= i %>" name="aa"></textarea>
    </form>
  </div>
</td>
<td><input type="image" src="/Images/edit.png" alt="button" style="width: 20px" onclick="myFunction(<%= i %>)"></td>

JS部分：

<style>
[id^="panel-"] { display: none; } /* 匹配所有以panel-开头的id */
</style>
<script>
function myFunction(index) {
  const panel = document.getElementById(`panel-${index}`);
  panel.style.display = "block";
  console.log("hi")
}
</script>

两种方案都能解决你的问题，方案一不需要依赖索引，更推荐优先使用。

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