將類元素拉入數組中，然後將它們總結起來

Question

我對JavaScript非常陌生，我需要一些幫助來做到這一點。這些課程將從不同的表格中提取（如下所示）。我只需要一種方法將每個班級的所有單元格值拉出來並總結出來。所以classone = 1234 + 1234.我很困惑，是否document.getElementByClassName工作？任何幫助，將不勝感激。

<table> 
<tbody> 
    <tr><td class="classone">1234</td></tr> 
    <tr><td class="classtwo">1234</td></tr> 
    <tr><td class="classthree">1234</td></tr> 
</tbody> 
</table> 


<table> 
<tbody> 
    <tr><td class="classone">1234</td></tr> 
    <tr><td class="classtwo">1234</td></tr> 
    <tr><td class="classthree">1234</td></tr> 
</tbody> 
</table> 

Answer 1

document.getElementsByClassName除IE（8及以下）以外的作品。

function sumByClass(classname){ 
    var els = document.getElementsByClassName(classname); 
    var i, sum = 0; 

    for(i = els.length; i--;) 
     sum += parseInt(els[i].innerText || els.textContent, 10) 

    return sum; 
} 

對IE8的支持，你可以使用querySelectorAll：

function sumByClass(classname){ 
    var els; 
    var i, sum = 0; 

    if(document.getElementsByClassName) // Modern 
     els = document.getElementsByClassName(classname); 
    else if(document.querySelectorAll) // IE 8 
     els = document.querySelectorAll((' ' + classname).replace(/ +/g, '.')); 

    for(i = els.length; i--;) 
     sum += parseInt(els[i].innerText || els.textContent, 10) 

    return sum; 
} 

JSFiddle

JSFiddle (With IE8 support)

對於IE 7和6，你可以在我的答案here看看定義一個函數它通過類名獲取元素，在IE8 +中返回一個NodeList，但是在IE7及以下版本中返回一個數組。對於跨瀏覽器解決方案，您可以只使用該列表/數組的值相加以同樣的方式我上面做的：

function sumByClass(classname){ 
    var els = GEBCN(classname); 
    var i, sum = 0; 

    for(i = els.length; i--;) 
     sum += parseInt(els[i].innerText || els.textContent, 10) 

    return sum; 
} 

當然，你總是可以使用一個框架/庫如jQuery使這個更簡單，因爲好。

Answer 2

如果您是JavaScript新手，我會查看一下jQuery JavaScript庫。您可以使用它添加到你的所有的HTML頁面：

<script type="text/javascript" https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js 

該解決方案使用它，並在所有現代瀏覽器的工作原理，以及早在IE 6

function addByClass(classname) { 
    var sum = 0; 
    $.each($(' ' + classname).replace(/ +/g, '.'), function(i, item) { 
     sum += parseInt($(item).html()); 
    }); 
    return sum; 
} 

http://jsfiddle.net/BwmZb/2/