Right align numeric values in a table and the <thead>

Question

Almost have it - picture a table with dynamic data - This works to right align date and numeric columns in a table But the kicker is I want to also right align the label column in the corresponding <thead><th> column. If I understand the behind the scenes this method below goes one row at a time and if there's a match it applies text-align:right to the <td>. So If do this for every tr in the table that finds the regex match it will perform the text-align: right to the <th> which is overkill if I have 100 rows then wouldn't it attempt to do it 500 x. How do I perform this better to right align the label once on a regex match.

$('tr').each( function () 
{
    // right align any numeric columns
    $(this).children('td:gt(0)').filter(function() 
    {
        return this.innerHTML.match(/^[0-9\s\.,]+$/);
    }).css('text-align','right');

    // right align any date columns in ddmmmyyyy format
    $(this).children('td:gt(0)').filter(function() 
    {
        return this.innerHTML.match(/\d{1,2}\w{3}\d{2,4}/);
    }).css('text-align','right');
});

HTML:

 <thead><tr><th>Name</th><th>Age</th></tr></thead>
 <tbody>
 <tr><td>Silly Me</td><td>29</td></tr>
 <tr><td>Not again</td><td>48</td></tr>
 ....
 </tbody>

So it will traverse the doc and on the 2nd row it sees a numeric column. So I want the right align as well as the corresponding column on the but let's only do this once to the row.

Make sense?

Answer 1

If I understood well, you wanted the heading "Age" to align right if any of the cells below it were numbers (which of course they would also align right with your js function)... For that, I have made some minor modifications to your code, so here we go:

HTML (here I added some more rows so you can see the example with more options):

<table>
<thead><tr><th>Name</th><th class="testclass">Age</th></tr></thead>
 <tbody>
 <tr><td>Silly Me</td><td>24</td></tr>
 <tr><td>Not again</td><td>df</td></tr>
 <tr><td>Once more</td><td>32</td></tr>
 <tr><td>and again</td><td>test22</td></tr>
 <tr><td>today is</td><td>13052014</td></tr>
 <tr><td>and final</td><td>41</td></
     tr>
 </tbody>
</table>

CSS (the only purpose of this, is to expand the table's width and add some borders in order for the example to show clearer too!):

table {width:300px; border:1px solid #ddd;}
th,td {border:1px solid #ddd;}

JS (here are my modifications, so I left it for the end!):

$('tr').each( function () 
{
    // right align any numeric columns
    $(this).children('td:gt(0)').filter(function() 
    {
        var cond1 = this.innerHTML.match(/^[0-9\s\.,]+$/);
        if (cond1){
            $(this).css('text-align','right');
            $(".testclass").css('text-align','right');
        }
    });

    // right align any date columns in ddmmmyyyy format
    $(this).children('td:gt(0)').filter(function() 
    {

        var cond2 = this.innerHTML.match(/\d{1,2}\w{3}\d{2,4}/);
        if (cond2){
            $(this).css('text-align','right');
            $(".testclass").css('text-align','right');
        }
    });
});

I hope this was what you were looking for and this is helpful to you. Happy coding!

(see it working here: http://jsfiddle.net/Pxwg3/)