如何將CSS僅應用於jQuery中的數字？

Question

我有這個HTML

<tr>
   <td>Test</td> 
   <td>324</td>
</tr>

我的默認CSS是text-align:left

但是我想將text-align:center應用於任何包含數字的<td> 。

我大約有50個HTML文件，因此無法手動添加類。

Answer 1

您可以使用filter和一些正則表達式魔術：

$('td').filter(function() {
  return /^\d/.test($(this).text());
}).css('text-align', 'center');

上面的正則表達式有點簡單，如果您需要更高的精度，請使用此正則表達式：

/((?!\w+[^\s]))\d+\1/

上面的將匹配(space)123和123(space)但不匹配123a或asd 123因此，如果您要查找的是基本上只允許數字和空格。 要添加更多的有效字符只是把他們像[^\\s,] ，這將使逗號,有效了。

Answer 2

老式的解決方案（效果很好）：

function Trim(str){
    return str.replace(/^\s+|\s+$/g,"");
}

function applyCssCustomToSomeTds(){
    for(i=0;i<document.getElementsByTagName('td').length;i++){
        var elementTd = document.getElementsByTagName('td')[i];
        if(!isNaN(Trim(elementTd.innerHTML))){
            elementTd.style.textAlign = "center";
        }
    }
}

Answer 3

​$(function(){
    $("td").filter(function(){
        return (/^\s*\d*\.?\d+\s*$/).test(this.innerHTML);
    }).css("text-align","center");        
});​​

---

編輯：這是一個jsfiddle： http : //jsfiddle.net/Avf7P/

Answer 4

作為通過jquery添加類的另一個示例，您可以查看此小提琴 。 類“ centerMe”僅包含所需的文本對齊值。

 $('td').each(function(){
            if($.isNumeric($(this).html()))
            {
                $(this).addClass('centerMe');
            }
    });

請注意，這使用的isNumeric可能不是您的意圖。 如果是這種情況，那么您需要對其進行修改，以使用其他一些解決方案中提到的正則表達式方法之一。