jQuery如何动态给HTML标签的system-id属性赋值？代码问题排查

问题原因 #

你当前写法的核心问题是：$(i + 1)被放在了单引号包裹的普通字符串中，JavaScript不会解析普通字符串里的变量或表达式，最终渲染出来的system-id属性值就是固定的$(i + 1)文本，而不是你想要的计算结果。

推荐修正方案 #

有三种常用的实现方式，按规范程度优先推荐第二种：

• 方案1：字符串拼接
  把动态值和静态字符串拆分拼接即可：

tCell = $('<td>').html('<button type="button" system-id="' + (i + 1) + '">Preview</button>'); 
$('#result').append(tRow.append(tCell));

• 方案2：使用jQuery的attr()方法（更推荐，可读性和可维护性更高）
  不要把动态属性拼在HTML字符串里，单独用attr方法赋值自定义属性，还能自动处理特殊字符转义，安全性更高：

// 先创建button元素，再单独设置自定义属性
const $btn = $('<button type="button">Preview</button>').attr('system-id', i + 1);
tCell = $('<td>').append($btn);
$('#result').append(tRow.append(tCell));

• 方案3：使用ES6模板字符串
  如果你的运行环境支持ES6语法，用反引号包裹模板字符串，用${}包裹动态表达式更简洁：

tCell = $('<td>').html(`<button type="button" system-id="${i + 1}">Preview</button>`); 
$('#result').append(tRow.append(tCell));

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