使用jQuery将表转换为div'；s和在每个td前面附加th

我正在尝试将所有表转换为div，并添加转换为div的每个td的thhtml或thin-from的内容

所以我的桌子看起来像这样：

<table>
    <tr>
      <th>Title 1</th>
      <th>Title 2</th>
      <th>Title 3</th>
      <th>Title 4</th>
      <th>Title 5</th>
    </tr>
    <tr>
      <td>Data 1</td>
      <td>Data 2</td>
      <td>Data 3</td>
      <td>Data 4</td>
      <td>Data 5</td>
    </tr>               
</table>

<div class="box">
<div class="row-fname"><span class="fname-label">TH Data</span> : <span class="fname-data">Data 1</span></div>
<div class="row-lname"><span class="lname-label">TH Data</span> : <span class="lname-data">Data 2</span></div>
<div class="row-address"><span class="address-label">TH Data</span> : <span class="address-data">Data 3</span></div>
<div class="row-city"><span class="city-label">TH Data</span> : <span class="city-data">Data 4</span></div>
<div class="row-state"><span class="state-label">TH Data</span> : <span class="state-data">Data 5</span></div>

标题1
标题2
标题3
标题4
标题5
数据1
数据2
数据3
数据4
数据5

我想把它转换成这样：

<table>
    <tr>
      <th>Title 1</th>
      <th>Title 2</th>
      <th>Title 3</th>
      <th>Title 4</th>
      <th>Title 5</th>
    </tr>
    <tr>
      <td>Data 1</td>
      <td>Data 2</td>
      <td>Data 3</td>
      <td>Data 4</td>
      <td>Data 5</td>
    </tr>               
</table>

<div class="box">
<div class="row-fname"><span class="fname-label">TH Data</span> : <span class="fname-data">Data 1</span></div>
<div class="row-lname"><span class="lname-label">TH Data</span> : <span class="lname-data">Data 2</span></div>
<div class="row-address"><span class="address-label">TH Data</span> : <span class="address-data">Data 3</span></div>
<div class="row-city"><span class="city-label">TH Data</span> : <span class="city-data">Data 4</span></div>
<div class="row-state"><span class="state-label">TH Data</span> : <span class="state-data">Data 5</span></div>

TH数据：数据1
TH数据：数据2
TH数据：数据3
TH数据：数据4
TH数据：数据5

我发现这段代码几乎可以工作，但可以找出如何使它获得th（如果有th），并在每个td的数据跨度之前添加它们

$('.content table').replaceWith(function() {
    var html = '';

    $('tr', this).each(function() {         
        html += '<div class="box grey-bg">';
        $('th, td', this).each(function() {
            html += '<span>' + $(this).html() + '</span>';
        });
        html += '</div>';
    });

    return '<div class="">' + html + '</div>';
});

$（'.content table'）.replaceWith（函数（）{
var html=''；
$（'tr'，this）.each（函数（）{
html+=''；
$（'th，td'，this）.each（function（）{
html++=''+$（this.html（）++''；
});
html+=''；
});
返回“”+html+“”；
});

任何帮助都将不胜感激

这是我的即兴创作：）

向每个

添加

数据名称

标记，以区分字段名称：

<table>
    <tr>
        <th data-name="fname">Title 1</th>
        <th data-name="lname">Title 2</th>
        <th data-name="address">Title 3</th>
        <th data-name="city">Title 4</th>
        <th data-name="state">Title 5</th>
    </tr>
    <tr>
        <td>Data 1</td>
        <td>Data 2</td>
        <td>Data 3</td>
        <td>Data 4</td>
        <td>Data 5</td>
    </tr>               
</table>​

演示：

此功能：

$('.content table').replaceWith(function() {

    var $th = $(this).find('th'); // get headers
    var th = $th.map(function() {
        return $(this).text();
    }).get(); // and their values

    $th.closest('tr').remove(); // then remove them

    var $d = $('<div>', { 'class': 'box' });

    $('tr', this).each(function(i, el) {
        var $div = $('<div>', {'class': 'inner'}).appendTo($d);
        $('td', this).each(function(j, el) {
            var n = j + 1;
            var $row = $('<div>', {
                'class': 'row-' + n
            });
            $row.append(
            $('<span>', {
                'class': 'label-' + n,
                text: th[j]
            }), ' : ', $('<span>', {
                'class': 'data-' + n,
                text: $(this).text()
            })).appendTo($div);
        });
    });

    return $d;
});

$（'.content table'）.replaceWith（函数（）{
var$th=$（this.find（'th'）；//获取标题
var th=$th.map（函数（）{
返回$（this.text（）；
}).get（）；//及其值
$th.closest（'tr'）.remove（）；//然后删除它们
var$d=$（''，{'class'：'box'}）；
$（'tr'，this）.each（函数（i，el）{
var$div=$（“”，{'class'：'inner'}）；
$（'td'，this）.each（函数（j，el）{
var n=j+1；
变量$row=$（''{
“类”：“行-”+n
});
$row.append(
$('', {
“类”：“标签-”+n，
正文：th[j]
}), ' : ', $('', {
“类”：“数据-”+n，
text:$（this.text（））
})).appendTo（$div）；
});
});
返回$d；
});

---

演示在

开始时为什么不使用div呢？用于表格数据时没有什么问题。否则，请参考nmford的评论。我需要在小于320像素的屏幕上转换一个我无法调整的表格（动态cms驱动），并且所有响应表格解决方案都不是一个选项。我知道我知道有一个非常奇怪的请求，但我真的很感谢任何能帮助我的人：）仅供参考，我正在使用这段代码…var width=parseInt（$（window.width（））；如果（也欢迎对jQuery代码进行任何速度改进：）这真是太棒了，但遗憾的是，我无法将data name=添加到th。该表由cms动态生成，是一个标准的普通表：（哦，但非常感谢您的快速响应和帮助！！！您的视觉震撼！！！@Aaron没有问题，您可以使用一系列名称。检查更新！哇！您真是太棒了！有一个问题我并不总是知道会有多少个th。我很惊讶您想出这个解决方案的速度有多快！！！Aaron我相信您会找到一个解决方案的从这个出发点出发。欢迎：）非常好！如果我不知道会有多少列或名称呢？也许让它在数字上递增？@Aaron是的，这可能会起作用-在

中的值
i
。每个
回调都是当前列号，因此您可以使用它来代替
标题[i]
。如果您用td添加更多tr，则不会在前面添加标题。只会将其添加到第一个。任何想法，这也是一个很棒的解决方案@Aaron在上看到更新的fiddle，但你需要澄清是每行都应该有一个额外的“盒子”，还是整个桌子都应该有一个。哇！很酷！好的，每一排都有一个div，整张桌子都有一个div。还有什么方法可以完全移除阵列部件？这是很棒的工作！：）