将类元素拉入数组然后将它们相加

时间:2012-03-22 14:58:42

标签: javascript

我是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>

2 个答案:

答案 0 :(得分:0)

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,但在IE 7及更低版本中返回一个数组。对于跨浏览器解决方案,您可以使用该列表/数组以与上述相同的方式对值进行求和:

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之类的框架/库,这样做也会更加简单。

答案 1 :(得分:0)

如果您不熟悉JavaScript,我会看一下jQuery JavaScript Library。您必须使用以下命令将其添加到您的所有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/