Javascript 将内容拉入td数据标签属性

我使用的是一种响应性表格样式，它可以折叠成更小的屏幕大小，并在每个单元格前显示表格标题

正文{
字体系列：“开放式Sans”，无衬线；
线高：1.25；
}
桌子{
边框：1px实心#ccc；
边界塌陷：塌陷；
保证金：0；
填充：0；
宽度：100%；
表布局：固定；
}
表格标题{
字号：1.5em；
边缘：.5em 0.75em；
}
表tr{
背景：#f8f8；
边框：1px实心#ddd；
填充：.35em；
}
表th，
表td{
填充：625em；
文本对齐：居中；
}
表th{
字体大小：.85em；
字母间距：.1米；
文本转换：大写；
}
@媒体屏幕和屏幕（最大宽度：600px）{
桌子{
边界：0；
}
表格标题{
字体大小：1.3em；
}
餐桌{
边界：无；
剪辑：rect（0）；
高度：1px；
保证金：-1px；
溢出：隐藏；
填充：0；
位置：绝对位置；
宽度：1px；
颜色：红色；
背景色：#000；
}
表tr{
边框底部：3px实心#ddd；
显示：块；
边缘底部：.625em；
}
表td{
边框底部：1px实心#ddd；
显示：块；
字体大小：.8em；
文本对齐：右对齐；
}
表td：之前{
/*
*aria标签没有任何优势，它不会在表中读取
内容：attr（aria标签）；
*/
内容：attr（数据标签）；
浮动：左；
字体大小：粗体；
文本转换：大写；
}
表td：最后一个孩子{
边界底部：0；
}
表td：第一个孩子{
颜色：白色；
背景：#000；
}
}

报表摘要
账户
预计到达日期
数量
时期
签证-3412
04/01/2016
$1,190
03/01/2016 - 03/31/2016
签证-6076
03/01/2016
$2,443
02/01/2016 - 02/29/2016
美国运通公司
03/01/2016
$1,181
02/01/2016 - 02/29/2016

是否希望表格从此处开始：

| Account | Estimated arrival date | Amount | Period |
| ------- | ---------------------- | ------ | ------ |
|    1234 |             03/15/2001 |  $1.00 |    3rd |
|    1235 |             04/21/2002 | $12.00 |    4th |
|    4594 |             11/11/2011 | $45.00 |    2nd |

对这个

-----------
Account: 1234
Estimated Arrival Date: 03/15/2001
Amount: $1.00
Period: 3rd
-----------
Account: 1235
Estimated Arrival Date: 04/21/2002
Amount: $12.00
Period: 4th
-----------
Account: 4594
Estimated Arrival Date: 11/11/2011
Amount: $45.00
Period: 2nd
-----------

更新 请尝试以下代码：

函数切换（）{
var table=document.querySelector（'.my table'）；
table.classList.toggle（'show-thin'）；
}

.table{
边界塌陷：塌陷；
显示：内联表；
}
.tr{
显示：表格行；
}
.th，.td{
显示：表格单元格；
边框：1px实心#555；
填充：3px6px；
}
.th{
背景色：#ddd；
字体大小：粗体；
文本对齐：居中；
}
.td{
文本对齐：右对齐；
}
.my-table.show-thin{
显示：块；
}
.show thin.tr{
边框底部：1px纯黑；
显示：块；
边缘底部：2px；
垫底：2件；
}
.秀瘦{
边界：无；
显示：块；
填充：0；
文本对齐：左对齐；
}
td:之前{
内容：attr（标题）：；
显示：内联块；
字体大小：粗体；
右侧填充：5px；
}
.显示瘦.隐藏瘦{
显示：无；
}

切换

账户
预计到达日期
数量
时期
1234
03/15/2001
$1.00
第三
1235
04/21/2002
$12.00
第四
4594
11/11/2011
$45.50
第二

我使用jQuery的解决方案似乎有效（可选：我跳过任何带有colspan的表单元格）：

$（'.myDiv table'）。每个（函数（索引、值）{
var headerCount=$（this）.find（'thead th'）.length；
对于（i=0；i这个小代码jQuery，将attr“data label”TH复制到TD

我修改了我的代码，加入了一些应该适合您需要的代码。我的主要问题是我想将这种响应风格应用于一些相当大的数据表，我不想进入HTML并为每个单元格设置数据标签或标题属性。所以我希望使用Javascript根据所有应用程序的内容设置该属性能干的。
    $('.myDiv table').each(function (index, value) {
    var headerCount = $(this).find('thead th').length;

    for (i = 0; i <= headerCount; i++) {
        var headerLabel = $(this).find('thead th:nth-child(' + i + ')').text();

        $(this).find('tr td:not([colspan]):nth-child(' + i + ')').replaceWith(
            function () {
                return $('<td data-label="' + headerLabel + '">').append($(this).contents());
            }
        );
    }

});

$('table th').each(function(i,elem) {
  var num = i + 1;
  $('table td:nth-child(' + num + ')').attr('data-label', $(elem).text());
});