如何将相应的表头(th)复制到其表格单元格(td)？

Question

我想将<th> table的内容复制到<td>单元格的相应属性.

我的桌子是这样的:

<table>
    <thead>
        <tr>
            <th>Heading 1</th>
            <th>Heading 2</th>
            <th>Heading 3</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>Lorem</td>
            <td>lipsum</td>
            <td>dolor</td>
        </tr>
    </tbody>
</table>

这就是我要实现的目标:

<table>
    <thead>
        <tr>
            <th>Heading 1</th>
            <th>Heading 2</th>
            <th>Heading 3</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td data-attr="Heading 1">Lorem</td>
            <td data-attr="Heading 2">lipsum</td>
            <td data-attr="Heading 3">dolor</td>
        </tr>
    </tbody>
</table>

我试过这个,但它不起作用:

var $th = $("thead td");
var $td = $("tbody td")

var $th = $td.closest('table').find('th').eq($td.index());
$td.attr("data-attr", $th);

jsFiddle

在我的自定义属性中,我得到data-attr="[object Object]"了文本的内容.

Answer 1

获取标题条目,然后为每一行获取每个标题条目td并使用其索引从匹配的标题条目中获取文本.有多种方法可以做到这一点.

长版:

var $th = $("thead th");
var $tr = $("tbody tr");
$tr.each(function(){
    $(this).find('td').each(function(index){
        $(this).attr('data-attr', $th.eq(index).text());
    });
});

JSFiddle: http ://jsfiddle.net/TrueBlueAussie/pLdzx6wm/

另一种方法(稍快)是使用标题元素的索引并立即将文本应用于所有匹配的列TD:

var $th = $("thead th");
var $tr = $("tbody tr");
$th.each(function(index){
    $tr.find('td:nth-child(' + index + ')').attr('data-attr', $(this).text());
});

JSFiddle: http ://jsfiddle.net/TrueBlueAussie/pLdzx6wm/1/

最后,您可以使用相当酷的jQuery功能,大多数参数都可以用回调函数替换,以返回值:

var $th = $("thead th");
var $tr = $("tbody tr");
$tr.each(function (index) {
    $('td', this).attr('data-attr', function () {
        return $th.eq($(this).index()).text();
    });
});

JSFiddle: http ://jsfiddle.net/TrueBlueAussie/pLdzx6wm/3/

这减少了一点:

var $th = $("thead th");
$('tbody tr td').attr('data-attr', function () {
    return $th.eq($(this).index()).text();
});

JSFiddle: http ://jsfiddle.net/TrueBlueAussie/pLdzx6wm/4/