如何创建调用JavaScript函数的Href链接并正确传递id参数？

哦，这个问题我之前也碰到过！问题出在你直接把id写在了字符串里——浏览器会把它当成字面量文本，而不是你实际要传递的变量值，所以自然传不过去。给你几个靠谱的解决办法：

1. 字符串拼接（简单直接，但要注意类型） #

如果id是数字类型，直接用模板字符串或者加号拼接把变量插入到href里：

// 推荐用ES6模板字符串，可读性更好
tdLink2.innerText = "Delete";
tdLink2.href = `javascript:deleteDepartment(${id})`;

// 传统加号拼接写法也可以
// tdLink2.href = "javascript:deleteDepartment(" + id + ")";

如果id是字符串类型，记得要给变量加单引号或双引号，不然会被当成变量名解析：

tdLink2.href = `javascript:deleteDepartment('${id}')`;

2. 使用点击事件监听器（更安全推荐） #

javascript:伪协议虽然能用，但存在XSS安全风险，而且代码维护起来也麻烦。更推荐的方式是给链接添加点击事件监听器，直接引用变量：

tdLink2.innerText = "Delete";
tdLink2.href = "#"; // 设置空锚点防止页面跳转
tdLink2.addEventListener('click', function(e) {
  e.preventDefault(); // 阻止默认的锚点跳转行为
  deleteDepartment(id); // 直接传递变量，不会有解析问题
});

这种方式不仅避免了字符串拼接的坑，还让代码逻辑更清晰，后期维护也更方便。

3. 用data属性存储id（适合批量处理场景） #

如果是动态生成多个删除链接，还可以把id存在元素的data属性里，点击时再读取：

tdLink2.innerText = "Delete";
tdLink2.href = "#";
tdLink2.dataset.id = id; // 把id存储到data-id属性

tdLink2.addEventListener('click', function(e) {
  e.preventDefault();
  const departmentId = this.dataset.id; // 读取存储的id
  deleteDepartment(departmentId);
});

这种方式的好处是，即使后续变量id发生变化，点击时依然能拿到正确的对应值。

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