JQuery：如果表头 <th> 有一个类，则将类添加到表单元格 <td>答案

【问题标题】：JQuery: If a table header <th> has a class, add class to table cell <td>JQuery：如果表头 <th> 有一个类，则将类添加到表单元格 <td>
【发布时间】：2013-11-26 08:33:59
【问题描述】：

假设我有以下 html：

<table>
    <thead>
        <tr>
            <th class="alignRight">Header1</th>
            <th>Header2</th>
            <th class="alignLeft">Header3</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>Row1</td> //Add class="alignRight"
            <td>Row1</td>
            <td>Row1</td> //Add class="alignLeft"
        </tr>
        <tr>
            <td>Row2</td> //Add class="alignRight"
            <td>Row2</td>
            <td>Row2</td> //Add class="alignLeft"
        </tr>
        <tr>
            <td>Row3</td> //Add class="alignRight"
            <td>Row3</td>
            <td>Row3</td> //Add class="alignLeft"
        </tr>
    </tbody>
</table>

如果 THEAD 中的 TR 包含类“alignRight”或“alignLeft”，我想将相同的类应用于 TBODY 中的相应 TD。

我正在使用 JQuery 并尝试了以下方法，但它们似乎都不能正常工作：

$('tr').has('th.alignRight').addClass('th.alignRight');
$('tr').has('th.alignLeft').addClass('th.alignLeft');

$('thead.tr').has('th.alignRight').addClass('tbody.th.alignRight');
$('thead.tr').has('th.alignLeft').addClass('tbody.th.alignLeft');

if ($('thead.tr').has('th.alignRight')){
    $('tbody.tr').addClass('th.alignRight');
}

if ($('thead.tr').has('th.alignRight')){
    $('tbody.tr.td').addClass('alignRight');
}

对可能出现的问题有任何想法吗？

更新：

我想补充一点，我已经使用 .each() 循环遍历了表。我只需要添加条件，如果当前表头具有该类，则将相同的类添加到表格单元格中。在当前迭代期间添加额外的迭代听起来会导致性能问题。这是真的吗？

循环：

function(res) {
    var tbl_body = "";
    $.each(res, function () {
        var tbl_row = "";
        $.each(this, function (k, v) {

          //Irrelevant code

            tbl_row += "<td>" + v + "</td>";
        })
        tbl_body += "<tr>" + tbl_row + "</tr>";
    })
    $("#print").html(tbl_body);
    },
    //Other irrelevant code

【问题讨论】：

请发布您的循环。但在所有情况下，您都必须循环访问您的 tds。
@OlivierH res = 结果。在这种情况下不使用它。
我不明白你的循环，以及如何修改它来放置类。稍后再做一个循环，就像我们写的那样：你不会有性能问题，除非你的表有数千行。

标签： javascript jquery html html-table

【解决方案1】：

试试

$('table thead th[class]').each(function () {
    $('table tbody td:nth-child(' + ($(this).index() + 1) + ')').addClass(this.className)
})

演示：Fiddle

【讨论】：

@ArunPJohny 似乎是那些日子之一，+1
我已经有一个遍历表行的 .each 函数。我需要的是一个函数，它只检查一个类的当前表头，如果是的话，将该类添加到表单元格中。嵌套 .each() 函数有问题吗？
@我没有包含它。我认为没有必要，因为我所关心的只是在满足特定条件时添加类。
我添加了循环。见上文。

【解决方案2】：

您的代码没有按照您的想法执行：

// find all tr's that have a th with class `alignRight` and add class `th.alignRight` to them
$('tr').has('th.alignRight').addClass('th.alignRight');
// find all tr's that have a th with class `alignLeft` and add class `th.alignLeft` to them
$('tr').has('th.alignLeft').addClass('th.alignLeft');

等等等等

您的代码对<td> 的作用没有

可以做些什么：

var thead = $('thead');
var tbody = $('tbody');

var rightIndex = $('th.alignRight', thead).index();
var leftIndex = $('th.alignLeft', thead).index();

$('tr', tbody).each(function(){
   $('td', this).eq(rightIndex).addClass('alignRight');
   $('td', this).eq(leftIndex).addClass('alignLeft');
});

【讨论】：

【解决方案3】：

您的 addClass 字符串均无效。添加类时，您只需提供类名.... 没有dot

/* would add class to the TR*/
$('tr').has('th.alignLeft').addClass('alignLeft');

现在添加到TD可以简单地使用选择器

$('tr th.alignLeft td').addClass('alignLeft');

【讨论】：

【解决方案4】：

我认为您看不到 jquery 选择器的工作原理。 $('thead.tr') 意思是：找到我所有的 thead，它有 tr 类。显然不是你想做的。

这里的代码应该可以工作：

$('tbody tr td').each(function(index){
    //index contains the current td index in the parent tr (1,2,3),(1,2,3)...
    //if the corresponding th has a class
    if($('thead tr th').eq(index).attr('class') != ''){
        //put this class on the current td
        $(this).addClass($('thead tr th').eq(index).attr('class'));
    }
});

检查 td 是否有一个类是没有必要的，因为如果你给它一个空参数， addClass 什么都不做。

【讨论】：

发布你的循环（见我的评论）
我最终让它与您的代码一起工作。所以你得到了支票。 Arun 的回复可能会得到检查，但他使用的 :nth-child 与 IE8 存在问题。
正如我所说，如果您没有非常大的表，解析两次并不是什么大问题。您可以将此代码缩减为一行。
你是对的，但是表格可能会变得很大，所以我想为此编写代码。最后，我只使用了您的 if 条件中的代码。感谢您的帮助！

【解决方案5】：

这里有一个解决方案：(fiddle here)

var headrow = $('thead tr').children();
$('tbody tr').each(function(){
  var row = $(this).children();
  for(var i=0; i<headrow.length; ++i){
      if($(headrow[i]).hasClass("alignRight")){
          $(row[i]).addClass("alignRight");
      }
      if($(headrow[i]).hasClass("alignLeft")){
          $(row[i]).addClass("alignLeft");
      }
  }
});

【讨论】：