在每个 <td> 上添加 <th> 文本 - jquery答案

【问题标题】：Add <th> text on the each <td> - jquery在每个 <td> 上添加 <th> 文本 - jquery
【发布时间】：2015-03-25 11:56:55
【问题描述】：

我想在移动布局中将表格数据显示到不同的行中。所以我想做的是在每个 :before 伪选择器中添加值。所以它应该像那样显示。

名称：xyz

年龄：20

名称：abc

年龄：30

请在此处查看我的 JQuery 代码。如果只有一个，它工作正常，但如果有多个，则它不起作用

JQuery:

if ($('table').length) {
    var th_data;
    $('table th').each(function (index) {
        var index_th = index;
        th_data = $(this).text();
        $('table td').each(function (index) {
            var index_td = index;
            if (index_th == index_td) {
                $(this).attr('data-content', th_data);
            }
        });
    });
}

CSS 代码：

table th{display:none;}
table td:before{content:attr(data-content) '';position:absolute;top:6px;left:6px;width:45%;padding-right:10px;white-space:nowrap;}
table td{position:relative;padding-left:50%;display:block;}

解决方案：

我想我已经明白了。所以更新的 JQuery 代码是这样的。它在多个

上运行良好

 /* Changing the tabular data into rows */
if ($('table').length) {
    var th_data;
    $('table').each(function () {
        var _table = $(this);
        $(this).find('th').each(function (index) {
            var index_th = index;
            th_data = $(this).text();
            _table.find('tr').each(function () {
                $(this).find('td').each(function (index) {
                    var index_td = index;
                    if (index_th == index_td) {
                        $(this).attr('data-content', th_data);
                    }
                });
            });
        });
    });
}

【问题讨论】：

标签： jquery html css responsive-design

【解决方案1】：

原代码的问题在于选择器$('table td')获取了所有行中的所有<td>元素。

相反，对于每个<th> 元素，循环遍历正文行并使用.eq() 函数在行中获取正确的<td>。

$('table').each(function() {
    var $table = $(this);
        $rows = $table.children('tbody').children();
    $table.children('thead').children().children().each(function(i) {
        var text = $(this).text();
        $rows.each(function() {
            $(this).children().eq(i).attr('data-content', text);
        });
    });
});

jsfiddle

【讨论】：

【解决方案2】：

if ($('table').length) {
    var th_data = new Array(),
        temp = '';
    $('table th').each(function (index) {
        th_data[index] = $(this).text();
    });
    $('table tr').each(function (index) {
        var tr = $(this);
        $(this).find('td').each(function(index){
            temp+= th_data[index]+':'+$(this).text()+'<br />';
        });
        temp+= '<br />';
    });
    $('.result').append(temp);
}

table td{
border: 1px solid #000;  
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
    <tr class="header">
        <th>Name</th>
        <th>Age</th>
    </tr>
    <tr>
        <td>John</td>
        <td>10</td>
    </tr>
    <tr>
        <td>Adam</td>
        <td>15</td>
    </tr>
</table>
<div class="result"><Br /><br /><b>Output:</b><br /></div>

【讨论】：

【解决方案3】：

两个地方 $(this) 不一样。所以将其保存为变量。试试这个，希望能有所帮助

if ($('table').length) {
    var th_data;
    $('table th').each(function (index) {
        var index_th = index;
        var th = $(this);
        th_data = $(th).text();
        $('table td').each(function (index) {
            var index_td = index;
            if (index_th == index_td) {
                var td = $(this);
                $(td).attr('data-content', th_data);
            }
        });
    });
}

【讨论】：