Question

我想在移动布局中将表格数据显示到不同的行中。所以我要做的是在每个中添加值：在伪选择器之前。所以它应该显示出来。

姓名：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);
                    }
                });
            });
        });
    });
}

Answer 1

两个地方$（这个）不一样。所以将它保存为变量。试试这个，希望能有所帮助

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);
            }
        });
    });
}

Answer 2

＆＃13;

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);
}

＆＃13;

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

＆＃13;

<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>

＆＃13;

Answer 3

原始代码的问题是选择器$('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

在每个jquery上添加文本

3 个答案: