jQuery:如果表头< th>具有一个类，请将类添加到表单元格< td>中. [英] JQuery: If a table header <th> has a class, add class to table cell <td>

问题描述

假设我有以下html:

Let's say I have the following 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.

If a TR in the THEAD contains the class "alignRight" or "alignLeft" I would like to apply the same class to the corresponding TD in the TBODY.

我正在使用JQuery并尝试了以下方法，但似乎都无法正常工作:

I'm using JQuery and have tried the following, but none of them seem to work properly:

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

关于可能出什么问题的任何想法吗?

Any ideas on what could be wrong?

更新:

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

I would like to add that I already iterate through the table using a .each() loop. I only need to add the condition that if the current table header has that class, add that same class to the table cell. Adding in an extra iteration during the current iteration sounds like it would lead to performance issues. Is that true?

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

推荐答案

我认为您看不到jquery选择器如何工作. $('thead.tr')的意思是:找到具有 tr 类的所有 thead .显然不是您想做什么.

I think you don't see how jquery selectors work. $('thead.tr') means : find me all thead which has the tr class. Visibly not what you want to do.

下面的代码应该可以工作:

Here a code that should work :

$('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不会执行任何操作.

Checking if the td has a class is not necessary, since addClass does nothing if you give it an empty parameter.

这篇关于jQuery:如果表头< th>具有一个类，请将类添加到表单元格< td>中.的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！