Javascript 如何将相应的表格标题（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>

---

在我的自定义属性中，我得到的是

data attr=“[object object]”

而不是th text

获取标题条目，然后对于每一行，获取每个

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:

另一种方法（稍微快一点）是使用标题元素的索引，并将文本一次应用于所有匹配的列TDs：

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

JSFiddle:

最后，您可以使用相当酷的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:

这将进一步减少到：

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

---

jsidle:

您需要获取每个

tr

的

td

，并使用与

td

索引相同的

th

来获取正确的文本。 JSFiddle：

---

之所以会出现这种情况，是因为您试图附加jQuery对象，而不是元素中的文本

这是另一种方法

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

$td.attr('data-attr', function(){
    return $th.eq($(this).index()).text();
});

---

如果在同一页上有多个表，则接受的答案也会将第一个表的属性用于所有其他表。如果要确保每个表使用自己的属性，请执行以下操作：

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

---

没有足够的分数将此作为对优秀公认答案的评论发布。

注意，您的示例中有一个输入错误，但未使用：

var$th=$（“thead td”）

应该包括

thead th

。非常感谢@TrueBlueAussie

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

$tr.each(function(){
    var $td = $("td", this);
    $td.each(function(i, el){
        $(this).attr('data-attr', $th.eq(i).text());
    });
});

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

$td.attr('data-attr', function(){
    return $th.eq($(this).index()).text();
});

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