Выровняйте вправо числовые значения в таблице и <thead>

Question

Выровняйте вправо числовые значения в таблице и <thead>

0

Почти у него есть - изображение таблицы с динамическими данными. Это работает с правильным выравниванием даты и числовыми столбцами в таблице. Но кикер - это то, что я хочу также правильно выровнять столбец меток в соответствующем столбце <thead><th>. Если я понимаю за кулисами, этот метод ниже идет по одной строке за раз, и если есть совпадение, оно применяет text-align:right к <td>. Итак, если это сделать для каждого tr в таблице, которая находит соответствие в регулярном выражении, то будет выполняться text-align: right по 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>

Таким образом, он пересечет документ, а во 2-й строке он увидит числовую колонку. Поэтому я хочу выравнивание по правому краю, а также соответствующий столбец, но позволю только сделать это один раз в строке.

Имеют смысл?

R Clowes 13 май 2014, в 00:30

Источник

0

Что вы хотите от столбцов со смешанными значениями? Что если у вас (по какой-либо причине) есть «Имя», которое является 12345 ?
Niet the Dark Absol 12 май 2014, в 22:13
1

Поскольку у вас есть столбец «Возраст», задайте для всех <td class='age'>... td класс и установите CSS: <td class='age'>... и CSS td.age { text-align:right; }
sebnukem 12 май 2014, в 22:16

Теги:

jquery

css

html-table

dynamic

1 ответ

Ещё вопросы

Что вы хотите от столбцов со смешанными значениями? Что если у вас (по какой-либо причине) есть «Имя», которое является 12345 ?
Поскольку у вас есть столбец «Возраст», задайте для всех <td class='age'>... td класс и установите CSS: <td class='age'>... и CSS td.age { text-align:right; }

captain theo · Accepted Answer · 2014-05-12T20-23-00.000Z

Если бы я хорошо понял, вы бы хотели, чтобы заголовок "Age" выровнялся правильно, если какая-либо из нижележащих под ним ячеек была цифрой (что, конечно же, они также выравнивались бы прямо с вашей 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/)

Привет, капитан ... с этим решением (и я знаю, что мой браузер не жаловался), но исправляет ли он ".testclass" .css справа в каждой строке. Полагаю, если бы я хотел убедиться, что это произошло только один раз (как если бы компьютер жаловался), я мог бы установить переменную cssright = 'Y' и сделать этот последний бит, только если cssright! = 'Y' ...
Извините, но я не совсем понимаю вашу точку зрения. Есть ли шанс, что вы могли бы предоставить jsfiddle для этого?