Question

我想将表格的＆lt; 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/

Answer 2

您需要获取每个td的每个tr，并使用与th相同索引的td来获取正确的文字。 JSFiddle ：http://jsfiddle.net/5ge2et3b/3/

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

Answer 3

你得到的原因是因为你试图追加jQuery对象而不是元素中的文本。

这是另一种方法

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

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

Answer 4

如果在同一页面上有多个表，则接受的答案也将使用第一个表的属性用于所有其他表。如果你想确保每个表都使用自己的属性：

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

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

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

4 个答案: