将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