使用jQuery实现数组表格生成及行删除功能报错求助

首先来看你遇到的Uncaught SyntaxError: Unexpected token }错误，原因很明确：

• 你的newtest函数没有正确闭合，末尾缺少了结束的}
• 字符串拼接代码被截断了（na...），既没有完整引用数组元素name[i]，也没写完HTML结构，导致JS解析失败，代码自然无法运行

下面是修正后的完整代码，同时优化了删除行的事件绑定逻辑（动态生成的元素需要用事件委托才能正确绑定事件）：

HTML 结构 #

<!-- 先准备好表格容器和触发生成的按钮 -->
<table id="table1" border="1" cellpadding="8" cellspacing="0">
</table>
<button onclick="newtest()">生成媒体列表</button>

JavaScript 代码 #

// 用事件委托绑定删除行事件，适配动态生成的按钮
$(document).on('click', '.delete-btn', function() {
  // 找到当前按钮所在的行并删除
  $(this).closest('tr').remove();
});

function newtest() {
  var mediaNames = ["Avengers", "Black Mirror", "Star Wars"];
  var $table = $("#table1");
  
  // 清空表格原有内容
  $table.empty();
  
  // 添加表头行
  $table.append('<tr><th>媒体名称</th><th>操作</th></tr>');
  
  // 循环生成数据行
  for (var i = 0; i < mediaNames.length; i++) {
    // 完整拼接每行的HTML，包含删除按钮
    var rowContent = `
      <tr>
        <td>${mediaNames[i]}</td>
        <td><button class="delete-btn">删除该行</button></td>
      </tr>
    `;
    $table.append(rowContent);
  }
}

关键优化点说明： #

1. 修复语法错误：补全了函数闭合符号，完整拼接了HTML内容和数组元素引用
2. 事件委托绑定：动态生成的删除按钮无法用普通click绑定，通过$(document).on('click', '.delete-btn', ...)可以监听未来生成的元素事件
3. 代码可读性提升：用模板字符串（反引号`）拼接HTML，比传统的+拼接更清晰；用closest('tr')替代parents('tr')，更精准定位父行

现在运行代码，点击生成按钮就能看到完整的表格，点击每行的删除按钮就能移除对应行啦~

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