jQuery循环填充动态年月表头表格数据异常求助

嘿，我看了你的代码，发现几个关键问题导致只有'alim'子域名能显示数据，其他子域名毫无动静。咱们一步步来修复：

核心问题出在哪？ #

• 循环变量未重置：你定义的i2和counter2是外层作用域变量，第一个子域名循环完毕后，这些变量已经跑到最大值，后续子域名根本进不了循环，自然生成不了单元格。
• 日期匹配逻辑混乱：嵌套的$.each(ob.data)和for循环混在一起，导致每个数据条目都在遍历所有月份，重复生成内容，逻辑绕得人头晕。
• 冗余变量没必要：像_sPMonth2这种和_sPMonth完全一致的变量，纯粹增加维护成本，直接复用原变量就行。

修复后的完整代码 #

1. 简化初始化变量 #

先把月份和年份直接转成数字，省得后面反复转换：

var _sDate = $("input#idstartdate").val();
var _eDate = $("input#idenddate").val();
var _sPMonth = parseInt($("select#periodMonthStart :selected").val());
var _sPYear = parseInt($("select#periodYearStart :selected").val());
var _ePMonth = parseInt($("select#periodMonthEnd :selected").val());
var _ePYear = parseInt($("select#periodYearEnd :selected").val());
var _subdomain = $("input#subdomain").val();

2. 优化表头生成逻辑 #

原来的模运算逻辑太绕，换成直接从起始年月递增的方式，清晰易懂：

// 计算需要展示的总月份数
var totalMonths = (_ePYear - _sPYear) * 12 + (_ePMonth - _sPMonth) + 1;
var html = "<thead><tr><td>Subdomain</td>";

var currentYear = _sPYear;
var currentMonth = _sPMonth;

for (var m = 0; m < totalMonths; m++) {
    html += `<td>${currentYear} ${currentMonth}</td>`;
    // 月份递增，跨年自动切换年份
    currentMonth++;
    if (currentMonth > 12) {
        currentMonth = 1;
        currentYear++;
    }
}

html += "</tr></thead>";
$('#table-mrr-detail').append(html);

3. 修复表格主体填充逻辑 #

这里是关键！我把逻辑改成预先生成日期范围，再把每个子域名的数据转成键值对，这样查找数据高效得多，而且每个子域名独立处理，不会互相影响：

var html2 = "<tbody>";
// 先把所有需要展示的年月存成数组，方便后续匹配
var dateRange = [];
var tempYear = _sPYear;
var tempMonth = _sPMonth;
for (var m = 0; m < totalMonths; m++) {
    dateRange.push({year: tempYear, month: tempMonth});
    tempMonth++;
    if (tempMonth > 12) {
        tempMonth = 1;
        tempYear++;
    }
}

$.each(json.data, function (i, ob) {
    html2 += `<tr><td>${ob.subdomain}</td>`;
    // 把当前子域名的所有数据转成「年份-月份」为键的对象，方便快速查找
    var subdomainDataMap = {};
    $.each(ob.data, function (ind, obj) {
        var key = `${obj.year}-${obj.month}`;
        subdomainDataMap[key] = obj.amount;
    });

    // 遍历日期范围，逐个填充数据，没有数据就填0
    $.each(dateRange, function (d, date) {
        var key = `${date.year}-${date.month}`;
        var amount = subdomainDataMap[key] || 0;
        html2 += `<td>${amount}</td>`;
    });

    html2 += "</tr>";
});

html2 += "</tbody>";
$('#table-mrr-detail').append(html2);

为啥之前的代码不行？ #

之前的counter2和i2是外层变量，第一个子域名'alim'循环完后，counter2已经等于months2了，后面的子域名进入循环时，for(i2; i2 <= months2; i2++)的条件直接不满足，所以根本不会生成任何<td>，看起来就像没数据。而且嵌套循环的逻辑会让每个数据条目都遍历所有月份，生成大量重复单元格，完全是多余的。

内容的提问来源于stack exchange，提问作者Nasihun Amin Suhardiyan