CODEWITHSUNDEEP
javascriptjqueryhtmlhtml-table
neuquen
neuquen

Reputation: 4169

JQuery: If a table header <th> has a class, add class to table cell <td>

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

Upvotes: 3

Views: 18462

Answers (5)

OlivierH
OlivierH

Reputation: 3890

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.

Upvotes: 7

Miquel Las Heras
Miquel Las Heras

Reputation: 760

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

Upvotes: 0

charlietfl
charlietfl

Reputation: 171679

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

Upvotes: 0

Naftali
Naftali

Reputation: 146302

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

Upvotes: 1

Arun P Johny
Arun P Johny

Reputation: 388316

Try

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

Demo: Fiddle

Upvotes: 5

Related Questions