jqueryを使用して列の合計を個別に行い、新しい行の各列の下に個々の列の合計を表示する必要があります

Question

ここは私のHTMLです...これはプログラミングに使用するツールによって生成されています。テーブルクラスはmrquestiontableです。表の中の各入力ボックスにはクラスmreditがあります。 mreditを使用して私はすべてのボックスの合計を行うことができますが、列の合計を別々に行うことはできません。ここをクリックしてください。

<table summary="Please indicate the type of hospital/ clinic where you are 
currently practicing and the proportion of time spent in each practice." 
class="mrQuestionTable"> 
<tr><td></td> 
<td><span><center><b>Main Practice</b></center></span></td> 
<td><span><center><b>Secondary Practice</b></center></span></td> 
</tr> 
<tr> 
<td><span class="mrQuestionText">Public Hospital</span></td> 
<td><span><input type="text" class="mrEdit" value=""/></span></td> 
<td><span><input type="text" class="mrEdit" value=""/></span></td> 
</tr> 
<tr> 
<td><span class="mrQuestionText">Private Hospital</span></td> 
<td><span><input type="text" class="mrEdit" value=""/></span></td> 
<td><span><input type="text" class="mrEdit" value=""/></span></td> 
</tr> 
</table> 

Answer 1

列を計算するには、まず列/行に追加する必要があります。それはこのようなものかもしれないjqueryのためとして

<td class="calculate_R"><span><input type="text" class="mrEdit" value=""/></span></td>

、

var total = 0; 
// iterate through each td based on class 
$(".calculate_R").each(function() { 

    var value = $(this).text(); 
    //only if the value is a number 
    if(!isNaN(value) && value.length != 0) { 
     total += parseFloat(value); 
    } 
}); 

は、それからちょうど機能ですべてでそれをラップします。 $(calculate_total);

Answer 2

と

function calculate_total() { 
    //above code 
} 

コールそれは私があなたのニーズに合わせて少し何かを書いています。テーブルの下に追加された値を表示するために、追加の行が自動的に追加されます。入力で何かを編集すると、列の合計が計算され、テーブルの下のラベルに配置されます。

function setup() { 
 
    $('.mrQuestionTable').append('<tr><td></td><td><label></label></td><td><label></label></td><tr>'); 
 
} 
 

 
setup(); 
 

 
$('input').blur(function(e) { 
 
    var index = $(this).parent().parent().index(); 
 
    var elements = $('.mrQuestionTable td:nth-child(' + (index + 1) + ')'); //Skipping the first column 
 
    var label = elements.find('label'); 
 
    var inputs = elements.find('input'); 
 
    var count = 0; 
 
    label.text(''); 
 
    inputs.each(function(e) { 
 
    value = parseInt($(this).val()); 
 
    if (value) { 
 
     count += value; 
 
    } 
 
    label.text(count); 
 
    }); 
 
});

<table summary="Please indicate the type of hospital/ clinic where you are 
 
currently practicing and the proportion of time spent in each practice." class="mrQuestionTable"> 
 
    <tr> 
 
    <td></td> 
 
    <td><span><center><b>Main Practice</b></center></span></td> 
 
    <td><span><center><b>Secondary Practice</b></center></span></td> 
 
    </tr> 
 
    <tr> 
 
    <td><span class="mrQuestionText">Public Hospital</span></td> 
 
    <td><span><input type="text" class="mrEdit" value=""/></span></td> 
 
    <td><span><input type="text" class="mrEdit" value=""/></span></td> 
 
    </tr> 
 
    <tr> 
 
    <td><span class="mrQuestionText">Private Hospital</span></td> 
 
    <td><span><input type="text" class="mrEdit" value=""/></span></td> 
 
    <td><span><input type="text" class="mrEdit" value=""/></span></td> 
 
    </tr> 
 
</table> 
 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>