Javascript Jquery:按列和和动态循环表
我有这些场景,我想总结一下 1) 表A上的单位x和表B上的单位x 2) 单位y在表A上与单位y在表B上 3) 根据表A上的行索引将总和相应地放入表C 下面是我的代码,运行良好: 表A:Javascript Jquery:按列和和动态循环表,javascript,jquery,Javascript,Jquery,我有这些场景,我想总结一下 1) 表A上的单位x和表B上的单位x 2) 单位y在表A上与单位y在表B上 3) 根据表A上的行索引将总和相应地放入表C 下面是我的代码,运行良好: 表A: <table class="tableA" border='1'> <tbody> <tr> <td></td> <td>JAN</td>
<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>
<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>
<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>
问题:当前求和方法根据月份按其类名进行硬编码,例如:.jan.feb.mar
我如何在不硬编码类名的情况下动态地按其列循环,因为在12月份之前,代码将变得更长
谢谢每个函数的代码通常是相同的(差别实际上只是月份的差异。我们可以将其作为一个通用函数
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);
});
每个函数的代码通常是相同的(差别实际上只是一个月。我们可以将其作为一个通用函数
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);
});
假设每个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);
});
假设每个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);
});