jQuery：動態循環表的列和總和

Question

我有這些情況，我想總結一下

1）在表A 單元X與表B上單元X

2）對表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);
});

現在我們可以做類似的事情

// Some months for brevity
const months = ["jan", "feb", "mar", "apr", ... "nov", "dec"];

months.forEach(function(month) {
    processMonth($(".tableA"), month);
});

Answer 2

假設每個TD僅具有input [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);
});