0

我是一个 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;
}

这看起来很棒,我将它添加到我在我的 html 页面中引用的现有外部 .js 页面中。

但是,现在的问题是如何使用代码?查看该页面上的示例,看来我必须执行以下操作:

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

这是不现实的——有数百个这样的数字,我无法单独更新每一个。

我确信Javascript(或jQuery?)可以自动将编码应用于现有的“num”类以插入逗号......但我不知道如何去做。所以,所有这些都让我想到了我的问题:我如何有效地将这个(或其他更好的?)代码应用于 div 类以便添加逗号?

非常感谢任何帮助......但请记住我的新手,让我知道外部 .js 工作表中需要做什么以及 .html 页面上发生了什么。

谢谢!!

4

3 回答 3

1

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/

于 2012-07-31T18:00:45.213 回答
1

在页面加载时执行此代码:

$(".num").each(function() {
   var self = $(this), text = self.text();
   self.text(addCommas(text));
});
于 2012-07-31T18:01:36.667 回答
0

一个非常简单的 jQuery 解决方案将是......

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

...只要您将addCommas函数签名更改为此...

function addCommas(i, nStr)

这将起作用,因为您addCommas会将当前文本内容作为第二个参数,并返回更新的文本内容。这就是大多数 jQuery 的迭代器版本的方法的工作方式。

演示:http: //jsfiddle.net/gprf6/

于 2012-07-31T18:11:00.190 回答