使用 Stackable.js 的表过滤器 - （如何复制 <tr> 数据属性？）答案

【问题标题】：Table Filter with Stackable.js - (How to copy <tr> data-attributes?)使用 Stackable.js 的表过滤器 - （如何复制 <tr> 数据属性？）
【发布时间】：2021-11-04 09:35:42
【问题描述】：

我正在使用stackable.js 作为响应式表格。这非常适合生成移动友好的表格（但是）我也在尝试合并一个需要数据属性才能工作的表格过滤器。不幸的是，这些数据属性不会复制到表格的移动版本，所以我需要弄清楚如何修改脚本以包含它们。

我设法使用 jQuery .data() 和 for 循环解决了一些问题。

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

for(key in data) {
    tr_data.push("data-"+key + "=" + data[key]);
}

这会循环通过<tr> 来收集所有属性对并将它们推送到一个数组中。但是，将数组添加到标记时，附加属性的格式不正确。

他们复制到移动表中，但引号位置错误，需要删除逗号 - （见下文）。

data-tags="Tag" 2,data-priority="Urgent,data-milestone=Milestone" 2,data-status="In" progress,data-assigneduser="Larry,data-taskId=1"

属性“应该”匹配桌面格式 - （见下文）。
data-task-id="1" data-assigned-user="Larry" data-status="In Progress" data-milestone="Milestone 2" data-priority="Urgent" data-tags="Tag 2"

这里是 CodePen： https://codepen.io/jinch/pen/JjJbzww?editors=0010

– 第 125 行是创建数组的位置。

– 第 #135、#142、#145 行 ~ 是“tr_data”变量数组添加到标记的位置。

我做错了什么？

【问题讨论】：

标签： jquery attr

【解决方案1】：

我设法通过在属性值"'"+data[key]+"'" 周围添加引号来解决格式问题。还使用了join方法'+tr_data.join(" ") +'去掉了逗号。

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

    for(key in data) {
      tr_data.push("data-"+key + "=" + "'"+data[key]+"'");
 }

这是我如何将数组添加到标记的一个示例：

bodyMarkup += '<tr class="' + tr_class +'" '+tr_data.join(" ") +'>';

如果需要使用 stackable.js 的表格过滤器 ~ 这里有一个工作代码笔： https://codepen.io/jinch/pen/JjJbzww?editors=0010

【讨论】：