somme jquery cliqué ligne de tableau à partir de l'indice donné à 0

Question

<tr data-index="0" data-volume="3.50" data-price="14600.01" onclick="populateSellForm(0)" data-key="11"><td>3.50</td><td>14.600,01</td></tr> 
<tr data-index="1" data-volume="5.00" data-price="14449.99" onclick="populateSellForm(1)" data-key="7"><td>5.00</td><td>14.449,99</td></tr> 
<tr data-index="2" data-volume="0.78" data-price="14350.00" onclick="populateSellForm(2)" data-key="5"><td>0.78</td><td>14.350,00</td></tr> 
<tr data-index="3" data-volume="2.50" data-price="14349.99" onclick="populateSellForm(3)" data-key="1"><td>2.50</td><td>14.349,99</td></tr> 
<tr data-index="4" data-volume="1.10" data-price="14250.00" onclick="populateSellForm(4)" data-key="15"><td>1.10</td><td>14.250,00</td></tr> 

est-il une donnée de volume de somme de voie et moyen de données à partir de l'indice donné (indice Asume donné 3) aux données d'indice 0 avec jquery

peut-être vous pouvez me diriger vers la bonne direction car je fais ceci

Answer 1

Vous pouvez utiliser la fonction de filtre jquery pour filtrer la liste, puis additionner et afficher le résultat.

$(document).ready(function(){ 
 
    var sum = 0; 
 
    var avg = 0; 
 
    var filtered = $("tr").filter(function(){ 
 
     var id = parseInt($(this).data("index")); 
 
     return ((id <=3) && (id >=0)); 
 
    }); 
 
    filtered.each(function(){ 
 
    sum+= parseFloat($(this).data("volume")) 
 
    avg+= parseFloat($(this).data("price")) 
 
    }); 
 
    console.log(sum); 
 
    console.log(parseFloat(avg/filtered.length)); 
 
    
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.2/jquery.min.js"></script> 
 
<table> 
 
<tr data-index="0" data-volume="3.50" data-price="14600.01" onclick="populateSellForm(0)" data-key="11"><td>3.50</td><td>14.600,01</td></tr> 
 
<tr data-index="1" data-volume="5.00" data-price="14449.99" onclick="populateSellForm(1)" data-key="7"><td>5.00</td><td>14.449,99</td></tr> 
 
<tr data-index="2" data-volume="0.78" data-price="14350.00" onclick="populateSellForm(2)" data-key="5"><td>0.78</td><td>14.350,00</td></tr> 
 
<tr data-index="3" data-volume="2.50" data-price="14349.99" onclick="populateSellForm(3)" data-key="1"><td>2.50</td><td>14.349,99</td></tr> 
 
<tr data-index="4" data-volume="1.10" data-price="14250.00" onclick="populateSellForm(4)" data-key="15"><td>1.10</td><td>14.250,00</td></tr> 
 
</table>

Answer 2

// ** gamme de fonctions d'appel avec le début et le noeud final pour obtenir la somme et moyenne ** //

<script type="text/javascript"> 
function range(start,end){ 
    var sumVol = 0; 
    var sumPrice = 0; 
    var count = 0; 
    for(var i=start;i<=end;i++) 
    { 
     sumVol += parseFloat($('tr[data-index='+i+']').attr('data-volume')); 
     sumPrice += parseFloat($('tr[data-index='+i+']').attr('data-price')); 
     count++; 
    } 
    var avgPrice = (sumPrice/count); 
    return "Sum of Volume = "+sumVol+" & Average Price = "+avgPrice; 
} 

alert(range(1,3)); 
</script> 

Answer 3

Mon opinion à ce sujet:

1. J'ai supprimé onclick="populateSellForm(0)" du balisage car il semble redondant car vous avez déjà l'attribut data-index. A la place, j'ai attaché un gestionnaire d'événement click aux lignes. Ainsi, à chaque clic sur une ligne, la somme des volumes et le prix moyen sont calculés.

$(document).ready(function() { 
 
    $("table tr").on("click", function() { 
 
     if(!$(this).data("volume") || !$(this).data("price")) return; 
 
     
 
     var limit = $(this).data("index"), 
 
      trs = $("table tr"), 
 
      sumOfVolumes = 0, totalPrice = 0; 
 

 
     $.each(trs, function(i, val){ 
 
      if(i === 0) return true; 
 
      if(i > limit + 1) return false; 
 
      sumOfVolumes += +$(trs[i]).data("volume"); 
 
      totalPrice += +$(trs[i]).data("price"); 
 
     }); 
 
     $("#limit").text(limit + 1); 
 
     $("#volume").text(sumOfVolumes.toFixed(2)); 
 
     $("#price").text((totalPrice/(limit + 1)).toFixed(2)); 
 
    }); 
 
});

table { 
 
    border-collapse: collapse; 
 
    width: 100%; 
 
} 
 

 
th, td { 
 
    text-align: left; 
 
    padding: 8px; 
 
} 
 
tr:not(:first-child) {cursor: pointer; } 
 
tr:nth-child(even){background-color: #f2f2f2} 
 

 
th { 
 
    background-color: #4CAF50; 
 
    color: white; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<span id="limit">0</span> first items:<br> 
 
Total volume: <span id="volume">0</span><br> 
 
Average price: <span id="price">0</span><hr> 
 
<table> 
 
    <tr> 
 
    <th>Volume</th> 
 
    <th>Price</th> 
 
    </tr> 
 
<tr data-index="0" data-volume="3.50" data-price="14600.01" data-key="11"><td>3.50</td><td>14.600,01</td></tr> 
 
<tr data-index="1" data-volume="5.00" data-price="14449.99" data-key="7"><td>5.00</td><td>14.449,99</td></tr> 
 
<tr data-index="2" data-volume="0.78" data-price="14350.00" data-key="5"><td>0.78</td><td>14.350,00</td></tr> 
 
<tr data-index="3" data-volume="2.50" data-price="14349.99" data-key="1"><td>2.50</td><td>14.349,99</td></tr> 
 
<tr data-index="4" data-volume="1.10" data-price="14250.00" data-key="15"><td>1.10</td><td>14.250,00</td></tr> 
 
</table>