实现表格单元格点击后将文本添加至列表的功能及代码调试

我来帮你搞定这个需求！你的目标是点击表格中的单元格，把单元格的文本内容添加到指定列表里，先看看你现有代码里的几个小问题，再给你修正后的完整实现方案：

现有代码的问题点 #

• 大小写错误：JS里的DOM全局对象是小写的document，不是Document，大写的是构造函数，这里用小写才对
• 元素获取逻辑错误：你传入的obj应该就是点击的单元格元素本身，不需要用str(obj)再去getElementById，直接用obj就能拿到单元格内容
• 变量赋值逻辑混乱：element.innerHTML = text会把单元格的HTML改成纯文本（没必要这么做），而且user_item拿到的是文本字符串，后面用user_item.value完全错误——字符串没有value属性
• 缺少添加到列表的步骤：代码最后elLi...应该是把创建好的<li>元素添加到列表里，这部分没写完

修正后的完整实现 #

HTML结构示例

<!-- 示例表格 -->
<table>
  <tr>
    <td onclick="history_buff(this)">单元格1</td>
    <td onclick="history_buff(this)">单元格2</td>
  </tr>
  <tr>
    <td onclick="history_buff(this)">单元格3</td>
    <td onclick="history_buff(this)">单元格4</td>
  </tr>
</table>

<!-- 目标列表 -->
<ul id="user_history"></ul>

JavaScript代码

function history_buff(obj) {
  // 获取目标列表元素
  const elList = document.getElementById("user_history");
  // 从点击的单元格获取文本内容（兼容不同浏览器）
  const cellText = obj.innerText || obj.textContent;
  
  // 创建新的li元素
  const li = document.createElement("li");
  // 给li设置文本内容
  li.textContent = cellText;
  
  // 把li添加到列表末尾
  elList.appendChild(li);
}

代码说明 #

1. 表格单元格通过onclick="history_buff(this)"把自身元素作为参数传给函数，这样直接就能拿到点击的单元格
2. 用obj.innerText || obj.textContent获取文本，兼容所有主流浏览器
3. 用textContent给li赋值，比innerHTML更安全（避免XSS风险，因为我们只需要纯文本）
4. 最后用appendChild把新创建的li添加到列表里，完成添加操作

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