0

私はJavascriptの初心者です...そしてjQueryについて聞いたことがありますが、それを使用する方法についての手がかりがないので、ここでの知識が完全に不足していることをご容赦ください... :)

Excel データベースから Web サイトに動的に情報をインポートしています。数値にコンマがないことを除けば、うまく機能します。ソースで変更できないフォーマットの問題であるため、Web サイトのコードで変更する必要があります。

関連する 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

ページの読み込み時に次のコードを実行します。

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

jQuery ソリューション:

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

javascript ソリューション ( getElementsByClassNameをサポートしていないため、IE では機能しません)

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 に答える
0

非常に単純なjQueryソリューションは...

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

addCommas...関数シグネチャをこれに変更する限り...

function addCommas(i, nStr)

これはaddCommas、現在のテキスト コンテンツを 2 番目の引数として取得し、更新されたテキスト コンテンツを返すため、機能します。これが、jQuery のメソッドの反復子バージョンのほとんどがどのように機能するかです。

デモ: http://jsfiddle.net/gprf6/

于 2012-07-31T18:11:00.190 に答える