JQuery: If a table header has a class, add class to table cell

Question

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>

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.

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?

UPDATE:

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

Please post your loop. But in all cases you will have to loop on your `td`s. — OlivierH, Nov 13 '13 at 16:47
I don't understand your loop, and so how to modify it to put the classes. Just do another loop later as we wrote it : you won't have performance issues, except if your table has thousands of rows. — OlivierH, Nov 13 '13 at 17:23

OlivierH · Accepted Answer · 2013-11-13T16:31:14.507

7

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

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

edited Nov 13 '13 at 16:31

answered Nov 13 '13 at 16:23

OlivierH

3,875
1
19
32

Post your loop (see my comment) – OlivierH Nov 13 '13 at 16:48
I ultimately ended up getting it to work with your code. So you get the check. Arun's response probably would have gotten the check, but he uses `:nth-child` which has issues with IE8. – neuquen Nov 13 '13 at 21:08
As I said, it's not a big deal to parse two times tif you don't have a very huge table. And you can reduce this code to a single line. – OlivierH Nov 13 '13 at 21:16
You're right, but there is a possibility that the table could get huge, so I wanted to code for that. In the end, I only used the code from your if condition. Thanks for the help! – neuquen Nov 13 '13 at 21:56

score 5 · Answer 2 · answered Nov 13 '13 at 16:21

5

Try

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

Demo: Fiddle

answered Nov 13 '13 at 16:21

Arun P Johny

384,651
66
527
531

@ArunPJohny seems to be one of those days, +1 – Rory McCrossan Nov 13 '13 at 16:25
I already have a .each function that iterates through the table rows. What I need is a function that just checks the current table head for a class, and if it does, add that class to the table cell. Is nesting .each() functions a problem? – neuquen Nov 13 '13 at 16:36
@I didn't include it. I didn't think it was necessary since all I am concerned about is adding the class if a certain condition is met. – neuquen Nov 13 '13 at 16:48
I added the loop. See above. – neuquen Nov 13 '13 at 16:59

score 1 · Answer 3 · answered Nov 13 '13 at 16:22

Your code doesn't do what you think it does:

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

etc, etc.

Your code does nothing with the <td>'s

What could be done:

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

score 0 · Answer 4 · answered Nov 13 '13 at 16:23

None of your addClass strings are valid. Whan adding a class you only provide the className.... no dot in it

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

Now to add to the TD can simply use selector

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

score 0 · Answer 5 · answered Nov 13 '13 at 16:28

Here is a solution: (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: If a table header has a class, add class to table cell

5 Answers5

Linked