CODEWITHSUNDEEP
jquerycssalignment
M2_
M2_

Reputation: 317

How to align <td> with digits inside to the right, jQuery

i have a table(s) with different dynamic-generated content inside. How can i do that all with only numbers inside will have text-align to the right?

Well, i know how to add css to some element, the question is how to get only tds with digits

Thank you!

Upvotes: 1

Views: 7564

Answers (5)

Jalal El-Shaer
Jalal El-Shaer

Reputation: 14710

A better variation for Alec's wonderful answer, is

$('td').filter(function () {
    return this.innerText.match(/^[-?0-9\s\.,]+$/);
}).css('text-align', 'right');

This catches also negative numbers and will much the cell's textual content rather than the html content which fails in cases like

<td>
<div>1.49</div>
</td>

Upvotes: 0

J Pollock
J Pollock

Reputation: 31

I'd suggest some jquery, I've mocked up on jsbin.

$(document).ready(function(){   
    $("td").each(function(index, item){    

        if(isNaN($(item).text()) == false){
            $(item).addClass("match");
        } 
    }); 
});

Upvotes: 0

Ken Redler
Ken Redler

Reputation: 23943

If you want a jQuery-ish solution, one way is to use a custom selector:

$.expr[':'].isNumeric = function(obj){
  return !isNAN( $(obj).text() );
};

And then:

$('td:isNumeric').addClass('numeric');

Which assumes the style:

td.numeric { text-align: right; }

...or if you prefer:

$('td:isNumeric').css('text-align','right');

Upvotes: 2

Alec
Alec

Reputation: 9078

You can use the filter option:

$('td').filter(function() {
  return this.innerHTML.match(/^[0-9\s\.,]+$/);
}).css('text-align','right');

This will match "123", "12 3", "12.3" and "12,3" but not "abc", "abc123", etc.

Upvotes: 3

Scott Evernden
Scott Evernden

Reputation: 39966

Your question is not real clear but you can align-right in any cell like this:

<td align="right">123</td>

Upvotes: 0

Related Questions