Javascript/Jqueryでテーブル内のデータを計算する

Question

したがって、Javascript/Jqueryを使用してHTMLテーブル内でいくつかの計算を実行しようとしています。 1つのテーブルに7つの列があり、各列はそれらの列のセルにある値に基づいて計算を行う必要があります。

私は1つのためにこの仕事をするために管理し、それは私が動けなくなると、私はどこから始めれば分からない列ごとに動作しますので、私はそれをコーディングしてみてください一回でした。今は、そのクラス名を持つすべてのセルからすべての値を追加して、対応するすべてのセルに配置します。

ご協力いただきありがとうございます。私はすべての情報を残した場合、私に

https://fiddle.jshell.net/gu8feydq/

var aankoopprijs = $(".calc-aankoop").text(); 
 
var ob = $(".calc-ob").text(); 
 
var add = parseFloat(aankoopprijs) - parseFloat(ob); 
 
$(".calc-marktprijs").html(add); 
 

 
//Calculate the Groothandelprijs 
 
var marktprijs = $(".calc-marktprijs").text(); 
 
var kruissubsidie = $(".calc-kruissubsidie").text(); 
 
var add2 = parseFloat(marktprijs) - parseFloat(kruissubsidie); 
 
$(".calc-groothandelsprijs").html(add2); 
 

 
//Calculate the Eindgebruikerstarief 
 
var groothandelsprijs = $(".calc-groothandelsprijs").text(); 
 
var ob2 = $(".calc-ob2").text(); 
 
var add3 = parseFloat(groothandelsprijs) - parseFloat(ob2); 
 
$(".calc-eindgebruik").html(add3);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 
<table border="1" class="table-tariefstructuur" id="testtable"> 
 
    <tbody> 
 
    <tr> 
 
     <td class="producten">Producten</td> 
 
     <td style="text-align:center">Mogas</td> 
 
     <td style="text-align:center">Gasolie</td> 
 
     <td style="text-align:center">LPG 100</td> 
 
     <td style="text-align:center">LPG 20</td> 
 
     <td style="text-align:center">Gasolie</td> 
 
     <td style="text-align:center">Diesel</td> 
 
     <td style="text-align:center">Marine fuel oil</td> 
 
    </tr> 
 
    <tr id="aankoopprijs"> 
 
     <td class="producten">1 Aankoopprijs</td> 
 
     <td class="calc-aankoop" style="text-align:center">800</td> 
 
     <td class="calc-aankoop" style="text-align:center">&nbsp;</td> 
 
     <td class="calc-aankoop" style="text-align:center">500</td> 
 
     <td class="calc-aankoop" style="text-align:center">&nbsp;</td> 
 
     <td class="calc-aankoop" style="text-align:center">&nbsp;</td> 
 
     <td class="calc-aankoop" style="text-align:center">&nbsp;</td> 
 
     <td class="calc-aankoop" style="text-align:center">&nbsp;</td> 
 
    </tr> 
 
    <tr id="ob"> 
 
     <td class="producten">5 O.B. 6%</td> 
 
     <td class="calc-ob" style="text-align:center">50</td> 
 
     <td class="calc-ob" style="text-align:center">&nbsp;</td> 
 
     <td class="calc-ob" style="text-align:center">25</td> 
 
     <td class="calc-ob" style="text-align:center">&nbsp;</td> 
 
     <td class="calc-ob" style="text-align:center">&nbsp;</td> 
 
     <td class="calc-ob" style="text-align:center">&nbsp;</td> 
 
     <td class="calc-ob" style="text-align:center">&nbsp;</td> 
 
    </tr> 
 
    <tr id="marktprijs"> 
 
     <td class="producten">6 Marktprijs = som 1-5</td> 
 
     <td class="calc-marktprijs" style="text-align:center">&nbsp;</td> 
 
     <td class="calc-marktprijs" style="text-align:center">&nbsp;</td> 
 
     <td class="calc-marktprijs" style="text-align:center">&nbsp;</td> 
 
     <td class="calc-marktprijs" style="text-align:center">&nbsp;</td> 
 
     <td class="calc-marktprijs" style="text-align:center">&nbsp;</td> 
 
     <td class="calc-marktprijs" style="text-align:center">&nbsp;</td> 
 
     <td class="calc-marktprijs" style="text-align:center">&nbsp;</td> 
 
    </tr> 
 
    <tr id="kruissubsidie"> 
 
     <td class="producten">8 Kruissubsidie</td> 
 
     <td class="calc-kruissubsidie" style="text-align:center">4</td> 
 
     <td class="calc-kruissubsidie" style="text-align:center">&nbsp;</td> 
 
     <td class="calc-kruissubsidie" style="text-align:center">&nbsp;</td> 
 
     <td class="calc-kruissubsidie" style="text-align:center">&nbsp;</td> 
 
     <td class="calc-kruissubsidie" style="text-align:center">&nbsp;</td> 
 
     <td class="calc-kruissubsidie" style="text-align:center">&nbsp;</td> 
 
     <td class="calc-kruissubsidie" style="text-align:center">&nbsp;</td> 
 
    </tr> 
 
    <tr id="groothandelsprijs"> 
 
     <td class="producten">9 Groothandelsprijs = som 6-8</td> 
 
     <td class="calc-groothandelsprijs" style="text-align:center">&nbsp;</td> 
 
     <td class="calc-groothandelsprijs" style="text-align:center">&nbsp;</td> 
 
     <td class="calc-groothandelsprijs" style="text-align:center">&nbsp;</td> 
 
     <td class="calc-groothandelsprijs" style="text-align:center">&nbsp;</td> 
 
     <td class="calc-groothandelsprijs" style="text-align:center">&nbsp;</td> 
 
     <td class="calc-groothandelsprijs" style="text-align:center">&nbsp;</td> 
 
     <td class="calc-groothandelsprijs" style="text-align:center">&nbsp;</td> 
 
    </tr> 
 
    <tr id="ob2"> 
 
     <td class="producten">11 O.B. 6%</td> 
 
     <td class="calc-ob2" style="text-align:center">50</td> 
 
     <td class="calc-ob2" style="text-align:center">&nbsp;</td> 
 
     <td class="calc-ob2" style="text-align:center">&nbsp;</td> 
 
     <td class="calc-ob2" style="text-align:center">&nbsp;</td> 
 
     <td class="calc-ob2" style="text-align:center">&nbsp;</td> 
 
     <td class="calc-ob2" style="text-align:center">&nbsp;</td> 
 
     <td class="calc-ob2" style="text-align:center">&nbsp;</td> 
 
    </tr> 
 
    <tr id="eindgebruikgerstarief"> 
 
     <td class="producten">12 Eindgebruikerstarief = som 9-11</td> 
 
     <td class="calc-eindgebruik" style="text-align:center">&nbsp;</td> 
 
     <td class="calc-eindgebruik" style="text-align:center">&nbsp;</td> 
 
     <td class="calc-eindgebruik" style="text-align:center">&nbsp;</td> 
 
     <td class="calc-eindgebruik" style="text-align:center">&nbsp;</td> 
 
     <td class="calc-eindgebruik" style="text-align:center">&nbsp;</td> 
 
     <td class="calc-eindgebruik" style="text-align:center">&nbsp;</td> 
 
     <td class="calc-eindgebruik" style="text-align:center">&nbsp;</td> 
 
    </tr> 
 
    </tbody> 
 
</table>

Answer 1

を教えてくださいあなたは.each()を持つ要素をループする必要があり、その後、実行し、それとのフィドルを作成し

対応する要素を使用して各列を処理します。一例として、最初のビットを取る

$(".calc-aankoop").each(function(i) { 
 
    var aankoopprijs = $(this).text(); 
 
    var ob = $(".calc-ob").eq(i).text(); 
 
    var add = parseFloat(aankoopprijs) - parseFloat(ob); 
 
    $(".calc-marktprijs").eq(i).html(add); 
 

 
    //Calculate the Groothandelprijs 
 
    var marktprijs = $(".calc-marktprijs").eq(i).text(); 
 
    var kruissubsidie = $(".calc-kruissubsidie").eq(i).text(); 
 
    var add2 = parseFloat(marktprijs) - parseFloat(kruissubsidie); 
 
    $(".calc-groothandelsprijs").eq(i).html(add2); 
 

 
    //Calculate the Eindgebruikerstarief 
 
    var groothandelsprijs = $(".calc-groothandelsprijs").eq(i).text(); 
 
    var ob2 = $(".calc-ob2").eq(i).text(); 
 
    var add3 = parseFloat(groothandelsprijs) - parseFloat(ob2); 
 
    $(".calc-eindgebruik").eq(i).html(add3); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 
<table border="1" class="table-tariefstructuur" id="testtable"> 
 
    <tbody> 
 
    <tr> 
 
     <td class="producten">Producten</td> 
 
     <td style="text-align:center">Mogas</td> 
 
     <td style="text-align:center">Gasolie</td> 
 
     <td style="text-align:center">LPG 100</td> 
 
     <td style="text-align:center">LPG 20</td> 
 
     <td style="text-align:center">Gasolie</td> 
 
     <td style="text-align:center">Diesel</td> 
 
     <td style="text-align:center">Marine fuel oil</td> 
 
    </tr> 
 
    <tr id="aankoopprijs"> 
 
     <td class="producten">1 Aankoopprijs</td> 
 
     <td class="calc-aankoop" style="text-align:center">800</td> 
 
     <td class="calc-aankoop" style="text-align:center">&nbsp;</td> 
 
     <td class="calc-aankoop" style="text-align:center">500</td> 
 
     <td class="calc-aankoop" style="text-align:center">&nbsp;</td> 
 
     <td class="calc-aankoop" style="text-align:center">&nbsp;</td> 
 
     <td class="calc-aankoop" style="text-align:center">&nbsp;</td> 
 
     <td class="calc-aankoop" style="text-align:center">&nbsp;</td> 
 
    </tr> 
 
    <tr id="ob"> 
 
     <td class="producten">5 O.B. 6%</td> 
 
     <td class="calc-ob" style="text-align:center">50</td> 
 
     <td class="calc-ob" style="text-align:center">&nbsp;</td> 
 
     <td class="calc-ob" style="text-align:center">25</td> 
 
     <td class="calc-ob" style="text-align:center">&nbsp;</td> 
 
     <td class="calc-ob" style="text-align:center">&nbsp;</td> 
 
     <td class="calc-ob" style="text-align:center">&nbsp;</td> 
 
     <td class="calc-ob" style="text-align:center">&nbsp;</td> 
 
    </tr> 
 
    <tr id="marktprijs"> 
 
     <td class="producten">6 Marktprijs = som 1-5</td> 
 
     <td class="calc-marktprijs" style="text-align:center">&nbsp;</td> 
 
     <td class="calc-marktprijs" style="text-align:center">&nbsp;</td> 
 
     <td class="calc-marktprijs" style="text-align:center">&nbsp;</td> 
 
     <td class="calc-marktprijs" style="text-align:center">&nbsp;</td> 
 
     <td class="calc-marktprijs" style="text-align:center">&nbsp;</td> 
 
     <td class="calc-marktprijs" style="text-align:center">&nbsp;</td> 
 
     <td class="calc-marktprijs" style="text-align:center">&nbsp;</td> 
 
    </tr> 
 
    <tr id="kruissubsidie"> 
 
     <td class="producten">8 Kruissubsidie</td> 
 
     <td class="calc-kruissubsidie" style="text-align:center">4</td> 
 
     <td class="calc-kruissubsidie" style="text-align:center">&nbsp;</td> 
 
     <td class="calc-kruissubsidie" style="text-align:center">&nbsp;</td> 
 
     <td class="calc-kruissubsidie" style="text-align:center">&nbsp;</td> 
 
     <td class="calc-kruissubsidie" style="text-align:center">&nbsp;</td> 
 
     <td class="calc-kruissubsidie" style="text-align:center">&nbsp;</td> 
 
     <td class="calc-kruissubsidie" style="text-align:center">&nbsp;</td> 
 
    </tr> 
 
    <tr id="groothandelsprijs"> 
 
     <td class="producten">9 Groothandelsprijs = som 6-8</td> 
 
     <td class="calc-groothandelsprijs" style="text-align:center">&nbsp;</td> 
 
     <td class="calc-groothandelsprijs" style="text-align:center">&nbsp;</td> 
 
     <td class="calc-groothandelsprijs" style="text-align:center">&nbsp;</td> 
 
     <td class="calc-groothandelsprijs" style="text-align:center">&nbsp;</td> 
 
     <td class="calc-groothandelsprijs" style="text-align:center">&nbsp;</td> 
 
     <td class="calc-groothandelsprijs" style="text-align:center">&nbsp;</td> 
 
     <td class="calc-groothandelsprijs" style="text-align:center">&nbsp;</td> 
 
    </tr> 
 
    <tr id="ob2"> 
 
     <td class="producten">11 O.B. 6%</td> 
 
     <td class="calc-ob2" style="text-align:center">50</td> 
 
     <td class="calc-ob2" style="text-align:center">&nbsp;</td> 
 
     <td class="calc-ob2" style="text-align:center">&nbsp;</td> 
 
     <td class="calc-ob2" style="text-align:center">&nbsp;</td> 
 
     <td class="calc-ob2" style="text-align:center">&nbsp;</td> 
 
     <td class="calc-ob2" style="text-align:center">&nbsp;</td> 
 
     <td class="calc-ob2" style="text-align:center">&nbsp;</td> 
 
    </tr> 
 
    <tr id="eindgebruikgerstarief"> 
 
     <td class="producten">12 Eindgebruikerstarief = som 9-11</td> 
 
     <td class="calc-eindgebruik" style="text-align:center">&nbsp;</td> 
 
     <td class="calc-eindgebruik" style="text-align:center">&nbsp;</td> 
 
     <td class="calc-eindgebruik" style="text-align:center">&nbsp;</td> 
 
     <td class="calc-eindgebruik" style="text-align:center">&nbsp;</td> 
 
     <td class="calc-eindgebruik" style="text-align:center">&nbsp;</td> 
 
     <td class="calc-eindgebruik" style="text-align:center">&nbsp;</td> 
 
     <td class="calc-eindgebruik" style="text-align:center">&nbsp;</td> 
 
    </tr> 
 
    </tbody> 
 
</table>

Answer 2

：

var aankoopprijs = $(".calc-aankoop").text(); 
var ob = $(".calc-ob").text(); 
var add = parseFloat(aankoopprijs) - parseFloat(ob); 
$(".calc-marktprijs").html(add); 

は$（ "カルクaankoop"）のようなものをやってテキスト（）;。あなたが望むものではないすべての 'calc-aankoop'セルの連結テキストをあなたに与えます。 のテキストのテキストの最初のの 'marktprijs'セルには、の最初ののオークション値との最初のの値の合計が含まれています。

方法について：各marktprijsフィールドをループし、対応するaankoopとOBフィールドの合計でそれを移植します

$(".calc-marktprijs").each(function(i,marktprijs){ 
    var aankoopprijs = $(".calc-aankoop").eq(i).text(); 
    var ob = $(".calc-ob").eq(i).text(); 
    var add = parseFloat(aankoopprijs) - parseFloat(ob); 
    $(marktprijs).html(add); 
}); 

。