如何在Javascript中获取表格可编辑字段的新旧值用于日志？

看起来你已经用Struts迭代器渲染了表格，现在要实现点击字段编辑并记录新旧值对吧？我给你一套实用的方案，分两步走：先改造HTML结构存旧值，再用JS处理编辑和日志逻辑。

首先，调整你的表格渲染代码，给需要编辑的<td>加上两个关键配置：一个标识类（比如editable），还有一个data-old-value属性来存储页面渲染时的原始值——这就是我们要的旧值，从后端直接拿最准确：

<s:iterator var="posting" value="PostLookup"> 
  <tr class="update-rel"> 
    <td id="${post.Id}"><input type="checkbox" /></td> 
    <td class="alignleft">${post.coin}</td>
    <!-- 给可编辑的td添加标识类和旧值存储属性 -->
    <td class="alignleft editable" data-old-value="${post.rate}">${post.rate}</td> 
    <td class="alignleft editable" data-old-value="${post....}">${post....}</td>
  </tr>
</s:iterator>

接下来写JavaScript逻辑，处理点击编辑、获取新旧值并记录日志。这里给你两种实现方式，选适合你的场景：

方式一：点击生成输入框（更可控） #

这种方式在用户点击字段时才生成输入框，避免页面加载时冗余元素，体验更流畅：

// 给所有可编辑td绑定点击事件
document.querySelectorAll('.editable').forEach(td => {
  td.addEventListener('click', function() {
    // 避免重复创建输入框
    if (this.querySelector('input')) return;

    // 从data属性拿到初始旧值
    const oldValue = this.dataset.oldValue;
    // 创建输入框并设置初始值
    const input = document.createElement('input');
    input.type = 'text';
    input.value = oldValue;
    
    // 替换td内容为输入框并自动聚焦
    this.innerHTML = '';
    this.appendChild(input);
    input.focus();

    // 失去焦点时完成编辑
    input.addEventListener('blur', handleEditComplete);
    // 支持回车快速确认编辑
    input.addEventListener('keydown', (e) => {
      if (e.key === 'Enter') input.blur();
    });

    // 编辑完成的处理函数
    function handleEditComplete() {
      const newValue = input.value.trim();
      const parentTd = input.parentElement;
      // 拿到当前行的Post ID，方便日志定位具体记录
      const postId = parentTd.parentElement.querySelector('td:first-child').id;

      // 只有新旧值不同时才记录日志
      if (newValue !== oldValue) {
        // 这里替换成你的日志逻辑：比如发送到后端、存入本地存储等
        console.log(`[日志] 记录更新：Post ID=${postId}，字段旧值=${oldValue}，新值=${newValue}`);
        
        // 更新td显示和data-old-value，下次编辑时用新的旧值
        parentTd.textContent = newValue;
        parentTd.dataset.oldValue = newValue;
      } else {
        // 没修改的话恢复原文本
        parentTd.textContent = oldValue;
      }
    }
  });
});

方式二：使用contenteditable（更简洁） #

如果不需要复杂的输入框控制，直接用HTML的contenteditable属性让td可编辑，代码更短：

先修改HTML：

<td class="alignleft editable" data-old-value="${post.rate}" contenteditable="true">${post.rate}</td>

然后JS逻辑：

document.querySelectorAll('.editable').forEach(td => {
  td.addEventListener('blur', function() {
    const oldValue = this.dataset.oldValue;
    const newValue = this.textContent.trim();
    const postId = this.parentElement.querySelector('td:first-child').id;

    if (newValue !== oldValue) {
      // 日志记录逻辑
      console.log(`[日志] 记录更新：Post ID=${postId}，字段旧值=${oldValue}，新值=${newValue}`);
      // 更新data属性为新值，作为下次编辑的旧值
      this.dataset.oldValue = newValue;
      // 这里还可以添加调用后端接口更新数据的逻辑
    }
  });
});

关键要点说明： #

• 旧值的可靠性：用data-old-value存储页面渲染时的原始值，是最准确的旧值来源，不会被用户的临时修改干扰。
• 日志定位：通过父tr的第一个td（你设置了id="${post.Id}"）拿到Post的ID，让日志能精准定位到具体是哪条记录被修改。
• 性能优化：方式一的点击生成输入框，避免了页面初始化时生成大量input元素，适合数据量较大的表格场景。

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