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

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

• javascript
• jquery
• html
• html-table

• Please post your loop. But in all cases you will have to loop on your tds. – OlivierH Commented Nov 13, 2013 at 16:47
• @OlivierH res = result. It's not used in this case. – neuquen Commented Nov 13, 2013 at 17:16
• 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 Commented Nov 13, 2013 at 17:23

5 Answers 5

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.

Try

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

Demo: Fiddle

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

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

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