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

Question

我有這個網站

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

---

編輯：這裏有一個的jsfiddle：http://jsfiddle.net/Avf7P/

Answer 3

通過jQuery的添加類，你可以看看這個fiddle的另一個例子。類'centerMe'只包含您需要的文本對齊值。

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

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

Answer 4

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

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