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>

因此它会遍历doc，在第二行它会看到一个数字列。所以我想要正确的对齐以及相应的列，但是只允许对行进行一次。

有意义吗？

Answer 1

如果我理解得很好，你想要标题＆＃34;年龄＆＃34;如果它下面的任何单元格都是数字，那么右对齐（当然它们也会与你的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/）

右对齐表格中的数值和

1 个答案: