2

初心者の質問で申し訳ありませんが、このJavaScript関数をhtmlテーブルのデータに適用しようとしています。関数は、このスタック オーバーフローの投稿から取得されます。

function numberWithCommas(x) {
    return x.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ",");
}

この関数を次のようなものに適用したいと思います。

<table>
    <tr>
        <td>5000</td>
        <td>5600</td>
    </tr>
</table>

5,600 の次に 5,000 を返すことを期待しています。この単純なことを理解することはできません。タグの1つでIDまたはクラスを使用する必要があり、これが関数内の何かと一致する必要があることを知っているので、試しました

<table>
    <tr class="numberWithCommas">
        <td>5000</td>
        <td>5600</td>
    </tr>
</table>

無駄に。賛成票の量を考えると、関数が機能すると確信しています。

この作業を行うための手順を教えてください。基本的なチュートリアルをグーグルで検索しましたが、何も見つかりませんでした。

4

2 に答える 2

3

最初にすべての を取得tdし、コンテンツに対して関数を呼び出し、結果をセルに挿入する必要があります。

HTML

<table>
    <tr class="numberWithCommas">
        <td>5000</td>
        <td>5600</td>
    </tr>
</table>

Javascript 

function numberWithCommas(x) {
    return x.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ",");
}

var elements = document.querySelectorAll('.numberWithCommas td'),
    i;

for (i in elements) {
    if (elements[i].innerHTML !== undefined) {
        elements[i].innerHTML = numberWithCommas(elements[i].innerHTML);
    }
}

デモ

このすべてのコードを説明するには:

これはあなたの機能です：

function numberWithCommas(x) {
    return x.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ",");
}

これにより、 alltd内trのすべてをnumberWithCommasクラスとして取得し、それらすべてを javascript 変数の配列として設定できますelements。

var elements = document.querySelectorAll('.numberWithCommas td'),
    i;

次に、一度に 1 つずつアクセスする配列をループしますtd。

for (i in elements) {
    ...
}

for ループ内で、セルの値が空でないことを確認します。

if (elements[i].innerHTML !== undefined) {
    ...
}

ifステートメント内で関数を呼び出し、numberWithCommas()の値を渡しますelements[i].innerHTML。次に、結果の文字列を取得して、次のように適用しますelements[i].innerHTML。 

elements[i].innerHTML = numberWithCommas(elements[i].innerHTML);
于 2012-11-29T00:18:46.493 に答える
1

この関数を反復して適用する必要がありeach tdます..

var tr = document.getElementsByClassName('numberWithCommas');

for (var i = 0, len = tr.length; i < len; i++) {
    for(var j=0,len1 = tr[i].children.length;j<len1; j++){
        var td = tr[i].children[j];
        td.innerHTML= numberWithCommas(td.innerHTML)
    }
}​

function numberWithCommas(x) {
    return x.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ",");
};

フィドルをチェック

jQuery の使用

$('table tr.numberWithCommas').each(function(){
    var $tr = $(this);
    $tr.find('td').each(function(){
        var $td = $(this);
        $td.html(function(){
            return  numberWithCommas(this.innerHTML);
        });
    });        
});

jQueryフィドル

于 2012-11-29T00:14:48.217 に答える