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

Question

我想复制< th> 表格内容到<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/