右对齐表格中的数值和 <thead>

Question

几乎拥有它 - 用动态数据描绘一个表格 - 这可以右对齐表格中的日期和数字列但踢球者是我还想右对齐相应 <thead><th> 列中的标签列。如果我了解幕后情况，下面的这个方法一次只运行一行，如果有匹配项，它会将text-align:right 应用于<td>。因此，如果对找到正则表达式匹配的表中的每个 tr 执行此操作，它将执行 text-align: right 到 <th>，如果我有 100 行，那么它不会尝试执行 500 x。我如何更好地执行此操作以在正则表达式匹配时右对齐标签。

$('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>

因此它将遍历文档并在第二行看到一个数字列。所以我想要右对齐以及相应的列，但我们只对行执行一次。

有意义吗？

Answer 1

如果我理解得很好，您希望标题“年龄”在其下方的任何单元格是数字时对齐（当然它们也将与您的 js 函数对齐）... 为此，我对您的代码做了一些小的修改，所以我们开始吧：

HTML（这里我添加了更多行，以便您可以看到带有更多选项的示例）：

<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（这样做的唯一目的是扩大表格的宽度并添加一些边框，以使示例也显示得更清晰！）：

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

JS（这里是我的修改，所以我把它留到最后！）：

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

我希望这是您正在寻找的内容，并且对您有所帮助。编码愉快！

（在此处查看它的工作原理：http://jsfiddle.net/Pxwg3/）