如何引用 div 标签的 Javascript 函数来添加逗号?

Posted

技术标签:

【中文标题】如何引用 div 标签的 Javascript 函数来添加逗号?【英文标题】:How do I reference Javascript function for div tag to add commas? 【发布时间】:2012-07-31 17:57:12 【问题描述】:

我是 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+)(\d3)/;
    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 页面上发生什么.

谢谢!!

【问题讨论】:

jqfundamentals.com 是一个适合初学者的好网站。 谢谢你,@jbabey - 我会检查一下,看看我是否可以开始理解我看到的 jQuery 代码。 【参考方案1】:

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

$(".num").each(function() 
   var self = $(this), text = self.text();
   self.text(addCommas(text));
);

【讨论】:

如何在页面加载时执行代码?我在页眉中试过这个:&lt;script type="text/javascript"&gt; $(document).ready(function() $(".num").each(function() var self = $(this), text = self.text(); self.text(addCommas(text)); ); &lt;/script&gt; 没错。如果它不起作用,请检查您的浏览器控制台是否有 js 错误。 嗯。页面数据是通过 php 加载的事实是否会导致 jQuery 代码出现问题? @AmyB noop,是另一回事。您的浏览器控制台不显示任何内容?此脚本之前是否有 jQuery 蜜蜂参考?【参考方案2】:

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/

【讨论】:

IE 从版本 9 开始支持getElementsByClassName。此外,IE8 支持querySelectorAll,因此您可以使用它以获得更大的兼容性。 ...但不要使用.innerText。它是非标准的,没有广泛的支持,并且在一些支持它的现代浏览器中速度非常慢。仅将其用作 IE8 及更低版本的备份。 @amnotiam 如果他们不使用 jQuery,我不知道该推荐什么而不是 innerText,你有什么推荐? @devundef 这是我个人的解决方案,但有些人没那么幸运:P @不是我,我同意你的看法。遗憾的是,浏览器供应商并没有帮助我们,尤其是 MS。我向你承认,我忘记了许多从我曾经为 IE 和 Firefox 等创建变通办法的日子里学到的变通办法。在 jquery/prototype/dojo 之后,我再也没有回到纯 DOM 上。对我来说太烦人和冗长了。但你是对的。因为我知道 DOM,所以我可以看到 jQuery 为我做了什么。直接使用 jquery 的人看不到真正发生了什么,然后他们认为 jQuery 很神奇,但实际上不是。但它真的很有用:)【参考方案3】:

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

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

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

function addCommas(i, nStr)

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

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

【讨论】:

看起来非常简单......但是我应该将它放在我的代码中的什么位置以便它工作? @AmyB:这是您页面上唯一的 JavaScript 吗?如果是这样,我不会打扰使用 jQuery。但无论哪种方式,将其包装在&lt;script type="text/javascript"&gt;&lt;/script&gt; 标签中,然后放在&lt;body&gt; 中,就在&lt;/body&gt; 标签之前。 ...并确保您已加载 jQuery 库。

以上是关于如何引用 div 标签的 Javascript 函数来添加逗号?的主要内容,如果未能解决你的问题,请参考以下文章

javascript 如何获取div中的label标签的宽度?

javascript如何生成HTML标签

使用javascript在Div中找到锚点

js文件如何引用外部js

Ajax 如何给div赋值呢

使用CSS和Javascript制作标签