向Td内联JavaScript函数传递多参数报SyntaxError如何解决

• 参数缺少分隔符：两个参数之间没有加英文逗号分隔，直接拼接成了连续字符，不符合JS函数传参语法。
• 字符串参数无引号包裹：report.name是字符串类型，没有用引号包裹的话，浏览器解析时会将其识别为未定义的变量，直接抛出语法错误。
• 引号嵌套混乱：内联onclick事件的引号和拼接字符串的引号存在提前闭合的问题，导致最终生成的HTML结构语法错误。

方案1：调整原有字符串拼接逻辑 #

给字符串参数补充转义引号，同时添加参数分隔逗号，注意对name中可能存在的单引号做转义处理，避免二次报错：

html += '<td><a onClick="removeUser(' + report.id + ', \'' + report.name.replace(/'/g, "\\'") + '\')">Remove</a></td>';

方案2：使用ES6模板字符串（更易读，不易出错） #

用反引号包裹模板，直接通过${}注入变量，省去大量拼接符号：

$.each(result, function (key, report) {
  html += `
    <tr>
      <td>${report.id}</td>
      <td>${report.name}</td>
      <td><a onClick="removeUser(${report.id}, '${report.name.replace(/'/g, "\\'")}')">Remove</a></td>
    </tr>
  `;
});

方案3：事件委托（更推荐的最佳实践） #

不要使用内联onclick绑定，通过data属性存储参数，用事件委托统一绑定事件，完全规避拼接引号问题：

拼接HTML部分 #

html += `<td><a class="remove-btn" data-id="${report.id}" data-name="${report.name.replace(/"/g, "&quot;")}">Remove</a></td>`;

事件绑定部分（放在ajax请求外即可） #

$('#users').on('click', '.remove-btn', function() {
  const id = $(this).data('id');
  const name = $(this).data('name');
  removeUser(id, name);
});

function removeUser(id, name) {
  alert("ID: "+ id + " Name: "+ name)
}

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