我有这些场景,我想总结一下
1) 表 A 上有 单位 x,表 B 上有 单位 x
2) 表 A 上的 单位 y 与 表 B 上的 单位 y
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);
});
});
问题:当前的 sum 方法根据月份按其类名进行硬编码,例如:.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);
});
关于javascript - Jquery:按列和总和动态循环表,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/44274481/