如何将用户输入的图片URL渲染到动态生成的表格单元格内

你的代码存在几处逻辑错误，导致图片URL无法正确嵌入表格单元格：

• 误将id为image的按钮元素当作图片标签使用，按钮本身不存在src属性，无法存储用户输入的图片地址
• 新增表格行时，第一列单元格直接被赋值为空字符串，同时还清空了错误挂载在按钮上的src值，没有生成<img>标签渲染图片
• 模板字符串语法错误，${变量}的$和{}之间不能加空格，你写的$ {id}无法触发变量插值，会导致行ID生成、删除功能失效
• HTML末尾单独放置的空<img>标签没有任何作用，属于冗余代码

1. 单独声明全局变量存储用户输入的图片URL，不要将URL挂载到按钮元素上
2. 新增表格行时，第一列单元格直接生成带对应URL的<img>标签，添加简单样式限制图片尺寸，避免撑开表格布局
3. 修正所有模板字符串的语法错误
4. 新增行完成后清空暂存的图片URL和所有输入框内容，避免下次新增时复用上一次的输入

JavaScript部分 #

let id = 0;
// 暂存用户选择的图片URL
let currentImageUrl = "";

document.getElementById("image").addEventListener("click", () => {
  const getUrl = () => {
    const url = prompt("Enter image URL");
    return url ? url : getUrl();
  }
  currentImageUrl = getUrl();
});

document.getElementById("add").addEventListener("click", () => {
  const table = document.getElementById("list");
  const newRow = table.insertRow(1);
  // 修正模板字符串语法，生成正确的行ID
  newRow.setAttribute("id", `test-${id}`);

  // 第一列渲染图片，无URL时留空
  newRow.insertCell(0).innerHTML = currentImageUrl 
    ? `<img src="${currentImageUrl}" style="width: 80px; height: 80px; object-fit: cover;" alt="游戏封面">`
    : "";
  newRow.insertCell(1).innerHTML = document.getElementById("Game-name").value;
  newRow.insertCell(2).innerHTML = document.getElementById("hours-played").value;
  newRow.insertCell(3).innerHTML = document.getElementById("new-critic-score").value;
  newRow.insertCell(4).innerHTML = document.getElementById("new-personal-score").value;
  
  const actionCell = newRow.insertCell(5);
  actionCell.appendChild(createDeleteButton(id++));

  // 清空所有输入状态
  document.getElementById("Game-name").value = "";
  document.getElementById("hours-played").value = "";
  document.getElementById("new-critic-score").value = "";
  document.getElementById("new-personal-score").value = "";
  currentImageUrl = "";
});

function createDeleteButton(rowId) {
  const btn = document.createElement("button");
  btn.className = "btn btn-primary";
  btn.innerHTML = "Delete";
  btn.onclick = () => {
    const target = document.getElementById(`test-${rowId}`);
    target.parentNode.removeChild(target);
  };
  return btn;
}

HTML调整 #

删除body标签末尾冗余的空图片标签即可，其余表单、表格代码不需要改动：

<!-- 删除这行无效代码 -->
<!-- <img src="" alt=""> -->

内容的提问来源于stack exchange，提问作者Cruz Jr Garcia