使用Stackable.js实现表格过滤时如何正确复制<tr>的data属性

你遇到的属性格式错误由三个问题共同导致：

• jQuery .data() 会自动将HTML中kebab-case格式的data属性名转为驼峰格式（如原data-task-id会被转为taskId），直接拼接会生成不符合原格式的属性名
• 拼接属性时没有给值包裹双引号，值包含空格时会被浏览器截断识别为新属性，出现引号错位问题
• 直接将数组转为字符串插入标签，JS默认用逗号连接数组成员，导致属性之间多出多余逗号

修正代码 #

首先替换你收集data属性的逻辑：

var data = $(this).data(),
    tr_data = [];

// 驼峰命名转kebab-case工具函数，还原原属性名格式
function camelToKebab(str) {
  return str.replace(/([a-z0-9]|(?=[A-Z]))([A-Z])/g, '$1-$2').toLowerCase();
}

for(key in data) {
  // 转义值内的双引号，避免属性语法冲突
  const safeValue = String(data[key]).replace(/"/g, '"');
  // 正确拼接属性结构：data-[kebab属性名]="[转义后的值]"
  tr_data.push(`data-${camelToKebab(key)}="${safeValue}"`);
}

// 用空格连接所有属性，替代默认的逗号分隔
const trAttrStr = tr_data.join(' ');

然后修改你插入属性的代码位置：把原来直接拼接tr_data数组的写法，替换为拼接上面生成的trAttrStr变量即可，比如原来的<tr ' + tr_data + '>改为<tr ' + trAttrStr + '>。

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