Как мне ссылаться на функцию Javascript для тега div для добавления запятых?

Я новичок в Javascript... и я слышал о jQuery, но понятия не имею, как его использовать, поэтому, пожалуйста, миритесь с моим полным отсутствием знаний здесь...:)

Я динамически импортирую информацию из базы данных Excel на веб-сайт. Он прекрасно работает, за исключением того, что ни одно из чисел не имеет запятых - это проблема форматирования, которую я не могу изменить в источнике, поэтому мне нужно изменить ее в коде веб-сайта.

Соответствующий HTML-код выглядит так:

<tr><td class="num">191025</td><td>Stuff</td><td class="num">$60</td></tr>
<tr><td class="num">184160</td><td>Other Stuff</td><td class="num">$15</td></tr>

Я хочу использовать Javascript (или jQuery - все, что работает), чтобы добавить запятые ко всем существующим классам "num" (так что 191025 будет выглядеть как 191,025).

Я копался в этом и других сайтах и ​​нашел этот сайт: http://www.mredkj.com/javascript/nfbasic.html который имеет этот код общественного достояния:

function addCommas(nStr)
{
    nStr += '';
    x = nStr.split('.');
    x1 = x[0];
    x2 = x.length > 1 ? '.' + x[1] : '';
    var rgx = /(\d+)(\d{3})/;
    while (rgx.test(x1)) {
        x1 = x1.replace(rgx, '$1' + ',' + '$2');
    }
    return x1 + x2;
}

Это кажется великолепным, и я добавил его на свою существующую внешнюю страницу.js, на которую я ссылаюсь в своей html-странице.

Тем не менее, проблема заключается в том, как я могу использовать код? Глядя на примеры на этой странице, похоже, мне нужно было бы сделать что-то вроде этого:

<tr><td class="num">addCommas(191025)</td><td>Stuff</td><td class="num">$60</td></tr>

И это просто нереально - их сотни, и я просто не могу обновить каждое из них в отдельности.

Я уверен, что есть способ, которым Javascript (или jQuery?) Может автоматически применять кодирование к существующим классам "num" для вставки запятых... но я понятия не имею, как это сделать. Итак, все это приводит меня к моему вопросу: как эффективно применить этот (или другой - лучше?) Код к классу div, чтобы добавить запятые?

Я очень ценю любую помощь... но, пожалуйста, имейте в виду моего новичка, и дайте мне знать, что нужно перейти на внешний лист.js и что идет на странице.html.

Спасибо!!

Источник

3 ответа

Выполните этот код при загрузке страницы:

$(".num").each(function() {
   var self = $(this), text = self.text();
   self.text(addCommas(text));
});
Источник

Решение jQuery:

$('.num').each(function () {
    $(this).text(addCommas($(this).text()));
});​​​​​​​​​​

Решение JavaScript (не будет работать в IE, так как он не поддерживает getElementsByClassName)

var elements = document.getElementsByClassName('num');
var textPropertyToUse; // cross-browser support

for (var i = 0; i < elements.length; i++) {
    textPropertyToUse = 'textContent' in elements[i] ? 
        'textContent' : 
        'innerText';

    elements[i][textPropertyToUse] = addCommas(elements[i][textPropertyToUse]);
}

Рабочий пример: http://jsfiddle.net/XpbJV/

Источник

Очень простое решение jQuery было бы...

$(".num").text(addCommas);

... пока вы меняете addCommas подпись функции к этому...

function addCommas(i, nStr)

Это будет работать, потому что ваш addCommas будет принимать текущее текстовое содержимое в качестве второго аргумента и возвращать обновленное текстовое содержимое. Вот как работает большинство итераторных версий jQuery.

ДЕМО: http://jsfiddle.net/gprf6/

Источник
Другие вопросы по тегам