將javascript函數應用於html元素

Question

對不起noob問題，但我試圖將此javascript函數應用於html表中的數據。該功能來自this Stack Overflow post。

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

我想這個功能適用於這樣的事情：

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

與返回的5000下一個5600的希望。我無法弄清楚這個簡單的事情。我知道我需要在其中一個標籤上使用標識或類，並且這需要匹配功能中的某些東西，所以我試過

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

無濟於事。我相信這個功能可以提供大量的upvotes。

能有一個靈魂請走過我的步驟，使這項工作？我已經搜索了一個基本的教程，並沒有發現任何東西。

Answer 1

您首先需要獲取所有td s，調用內容上的函數並將結果插回到單元格中。

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); 
    } 
} 

Demo

解釋所有這些代碼：

這是你的函數：

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

這讓我們得到所有所有tr s的numberWithCommas作爲一個階級內部的td，並將它們全部作爲JavaScript變量elements數組：

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

然後我們循環訪問一個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); 

Answer 2

您需要遍歷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, ","); 
}; 

Check Fiddle

使用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 Fiddle