のjQuery：そのカラムと和

Question

ダイナミックループ表Iは、これらのシナリオを持っている、私は

1を加算したい）ユニットX表にを持つユニットXに表B

2）部YユニットとA表上のY表Bに

3）表A以下相応

が正常に動作している私のコードであり、上の行インデックスによって表Cに合計を置く：

表A：

<table class="tableA" border='1'> 
    <tbody> 
     <tr> 
      <td></td> 
      <td>JAN</td> 
      <td>FEB</td> 
      <td>MAR</td> 
     </tr> 
     <tr> 
      <td>Unit X</td> 
      <td><input type="text" value="1" class="jan"></td> 
      <td><input type="text" value="2" class="feb"></td> 
      <td><input type="text" value="3" class="mar"></td> 
     </tr> 
     <tr> 
      <td>Unit Y</td> 
      <td><input type="text" value="2" class="jan"></td> 
      <td><input type="text" value="2" class="feb"></td> 
      <td><input type="text" value="2" class="mar"></td> 
     </tr> 
    </tbody> 
</table> 

表B

<table class="tableB" border='1'> 
    <tbody> 
     <tr> 
      <td></td> 
      <td>JAN</td> 
      <td>FEB</td> 
      <td>MAR</td> 
     </tr> 
     <tr> 
      <td>Unit X</td> 
      <td><input type="text" value="4" class="jan"></td> 
      <td><input type="text" value="4" class="feb"></td> 
      <td><input type="text" value="4" class="mar"></td> 
     </tr> 
     <tr> 
      <td>Unit Y</td> 
      <td><input type="text" value="5" class="jan"></td> 
      <td><input type="text" value="5" class="feb"></td> 
      <td><input type="text" value="5" class="mar"></td> 
     </tr> 
    </tbody> 
</table> 

表C：

<table class="tableC" border='1'> 
    <tbody> 
     <tr> 
      <td></td> 
      <td>JAN</td> 
      <td>FEB</td> 
      <td>MAR</td> 
     </tr> 
     <tr> 
      <td>Unit X</td> 
      <td><input type="text" value="" class="jan"></td> 
      <td><input type="text" value="" class="feb"></td> 
      <td><input type="text" value="" class="mar"></td> 
     </tr> 
     <tr> 
      <td>Unit Y</td> 
      <td><input type="text" value="" class="jan"></td> 
      <td><input type="text" value="" class="feb"></td> 
      <td><input type="text" value="" class="mar"></td> 
     </tr> 
    </tbody> 
</table> 

のjQuery：

$(document).ready(function() { 

    $(".tableA").find(".jan").each(function() { 
     var value_A = $(this).val(); 
     var row_index = $(this).closest("tr").index(); 
     var value_B = $('.tableB').find("tr:eq("+row_index+") .jan").val(); 
     var sum = parseInt(value_A) + parseInt(value_B); 
     $('.tableC').find("tr:eq("+row_index+") .jan").val(sum); 
    }); 
    $(".tableA").find(".feb").each(function() { 
     var value_A = $(this).val(); 
     var row_index = $(this).closest("tr").index(); 
     var value_B = $('.tableB').find("tr:eq("+row_index+") .feb").val(); 
     var sum = parseInt(value_A) + parseInt(value_B); 
     $('.tableC').find("tr:eq("+row_index+") .feb").val(sum); 
    }); 
    $(".tableA").find(".mar").each(function() { 
     var value_A = $(this).val(); 
     var row_index = $(this).closest("tr").index(); 
     var value_B = $('.tableB').find("tr:eq("+row_index+") .mar").val(); 
     var sum = parseInt(value_A) + parseInt(value_B); 
     $('.tableC').find("tr:eq("+row_index+") .mar").val(sum); 
    });  
}); 

JSFiddle

問題：電流和方法はハード月に従ってそのクラス名によって符号化される、例えば：.jan .feb .mar

コードをハードコードすることなくその列でループする方法を動的に行うのは、コードが12月まで長くなるためです。

おかげ

Answer 1

は、各関数のコードは差が本当にただの月である（一般的に同じである。我々は、この一般的な機能を行うことができます。すなわち

const processMonth = function($table, month) { 
    // Assume month = jan/feb/mar/... 
    var value_A = $table.val(); 
    var row_index = $table.closest("tr").index(); 
    var value_B = $('.tableB').find("tr:eq("+row_index+") ." + month).val(); 
    var sum = parseInt(value_A) + parseInt(value_B); 
    $('.tableC').find("tr:eq("+row_index+") ." + month).val(sum); 
}); 

今、私たちは

ような何かを行うことができます

Answer 2

それぞれのTDが[type = "text"]という入力しかないと仮定すると、次のことができます。クラスセレクタは、必要に応じて使用できます。

$('.tableC input[type="text"]').each(function() { 
    var indexTR = $(this).closest('tr').index(); 
    var indexTD = $(this).closest('td').index(); 

    var dataA = $('.tableA tr:eq(' + indexTR + ') td:eq(' + indexTD + ') input[type="text"]').val(); 
    var dataB = $('.tableB tr:eq(' + indexTR + ') td:eq(' + indexTD + ') input[type="text"]').val(); 

    var dataC = parseInt(dataA) + parseInt(dataB); 
    $(this).val(dataC); 
});