簡體   English   中英

將類元素放入數組中,然后進行匯總

[英]Pulling class elements into an array and then summing them up

我是Java的新手,我需要一些幫助。 這些類將從不同的表中提取(如下所示)。 我只需要一種將所有單元格值從每個類中提取出來並進行匯總的方法。 所以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>

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 (支持IE8)

對於IE 7和6,您可以在這里查看我的答案以定義一個函數,該函數按類名稱獲取元素,在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之類的框架/庫來簡化這一過程。

如果您不熟悉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/

暫無
暫無

聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.

 
粵ICP備18138465號  © 2020-2024 STACKOOM.COM