Question

假设我有以下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（）循环遍历表。我只需要添加条件，如果当前表头具有该类，则将该相同的类添加到表格单元格中。在当前迭代期间添加额外的迭代听起来会导致性能问题。这是真的吗？

LOOP：

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

Answer 1

我认为你没有看到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')); } });。显然不是你想做的事。

这里应该有一段代码：

{{1}}

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

Answer 2

尝试

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

演示：Fiddle

Answer 3

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

// 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');
});

Answer 4

您的addClass字符串都不是有效的。 Whan添加了一个类，你只提供className ....其中没有dot

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

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

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

Answer 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");
      }
  }
});

JQuery：如果表头有一个类，则将类添加到表单元格

5 个答案: