如何用jQuery编辑表格td值？现有实现异常求技术帮助

我明白你要实现不依赖contenteditable的表格单元格编辑（毕竟IE不支持这个属性），看了你的需求后，帮你调整并实现了兼容IE的版本，一起来看看：

核心思路 #

通过点击按钮切换单元格的显示状态：默认显示文本，点击编辑按钮时替换为输入框，保存后再换回文本，全程不用contenteditable，完美兼容IE。

完整代码实现 #

HTML（规范结构）

<table id="elencoMezzi" width="100%">
  <thead>
    <tr><th>Field 1</th></tr>
  </thead>
  <tbody>
    <tr>
      <td>
        <span class="text">Value 1.1</span>
        <span class="floatright">
          <button type="button" class="edit-btn">Edit</button>
          <button type="button" class="save-btn" style="display:none;">Save</button>
        </span>
      </td>
    </tr>
    <tr>
      <td>
        <span class="text">Value 1.2</span>
        <span class="floatright">
          <button type="button" class="edit-btn">Edit</button>
          <button type="button" class="save-btn" style="display:none;">Save</button>
        </span>
      </td>
    </tr>
  </tbody>
</table>

CSS（基础样式）

.floatright {
  float: right;
  margin-left: 10px;
}
.edit-input {
  width: 120px;
}

JavaScript（兼容IE的核心逻辑）

// 兼容IE的事件绑定工具函数
function addEvent(element, eventName, handler) {
  if (element.addEventListener) {
    element.addEventListener(eventName, handler);
  } else if (element.attachEvent) {
    // IE8及以下用attachEvent
    element.attachEvent('on' + eventName, handler);
  }
}

// 获取表格的tbody元素，用事件委托处理按钮点击
var tableBody = document.getElementById('elencoMezzi').getElementsByTagName('tbody')[0];

addEvent(tableBody, 'click', function(e) {
  // 兼容IE的事件目标获取
  var target = e.target || e.srcElement;
  // 获取当前按钮所在的td单元格
  var currentTd = target.parentNode.parentNode;
  
  // 获取当前单元格内的文本容器、编辑按钮、保存按钮
  var textSpan = currentTd.getElementsByClassName('text')[0];
  var editBtn = currentTd.getElementsByClassName('edit-btn')[0];
  var saveBtn = currentTd.getElementsByClassName('save-btn')[0];

  // 点击编辑按钮的逻辑
  if (target.classList ? target.classList.contains('edit-btn') : target.className.indexOf('edit-btn') !== -1) {
    // 创建输入框，填充当前文本
    var input = document.createElement('input');
    input.type = 'text';
    input.className = 'edit-input';
    // 兼容IE的文本获取（textContent在IE8及以下不支持）
    input.value = textSpan.textContent || textSpan.innerText;
    
    // 替换文本容器为输入框
    currentTd.replaceChild(input, textSpan);
    // 切换按钮显示状态
    editBtn.style.display = 'none';
    saveBtn.style.display = 'inline-block';
    // 自动聚焦输入框，提升用户体验
    input.focus();
  }

  // 点击保存按钮的逻辑
  if (target.classList ? target.classList.contains('save-btn') : target.className.indexOf('save-btn') !== -1) {
    var input = currentTd.getElementsByClassName('edit-input')[0];
    var newText = input.value.trim();
    
    // 创建新的文本容器，设置新内容
    var newSpan = document.createElement('span');
    newSpan.className = 'text';
    // 兼容IE的文本设置
    if (typeof newSpan.textContent !== 'undefined') {
      newSpan.textContent = newText;
    } else {
      newSpan.innerText = newText;
    }
    
    // 替换输入框为文本容器
    currentTd.replaceChild(newSpan, input);
    // 切换按钮显示状态
    editBtn.style.display = 'inline-block';
    saveBtn.style.display = 'none';
  }
});

关键细节说明 #

• 事件委托：把点击事件绑定在tbody上，不用给每个按钮单独绑定，即使后续动态添加表格行也能正常生效
• IE兼容处理：
  • 事件绑定兼容addEventListener和attachEvent
  • 事件目标兼容e.target和e.srcElement
  • 文本内容兼容textContent和innerText
• 用户体验优化：编辑时自动聚焦输入框，保存时去除文本首尾空格

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