表 TD Rowspan 不适用于 Ajax Jquery答案

【问题标题】：Table TD Rowspan Not Working With Ajax Jquery表 TD Rowspan 不适用于 Ajax Jquery
【发布时间】：2019-02-20 22:32:03
【问题描述】：

请看看你是否可以帮助我。代码：

            var th_table = $('#table-id');
            $(data).each(function (index, th) {

                html = '<tbody>'
                    + '<tr>'
                    + '<td rowspan="2" class="text-left">' + th.MONTHNAME + '</td>'
                    + '<td class="text-left">' + th.CATEGORY + '</td>'
                    + '<td class="text-left">' + th.NOOFDAYS + '</td>'
                    + '</tr>'
                    + '</tbody>';
                th_table.append(html);
            });

结果

Month   Category   Days
Jan     CAT1       2
Jan     CAT2       3
Jan     CAT3       1
Feb     CAT1       2
Feb     CAT2       3
Mar     CAT3       1

我想要的输出

Month   Category   Days
Jan     CAT1       2
        CAT2       3
        CAT3       1
Feb     CAT1       2
        CAT2       3
Mar     CAT3       1

但是 ajax 无法识别行跨度...请帮助

【问题讨论】：

查看渲染后的输出（html），您的问题与 ajax 无关
什么意思？
只需右键单击您的网页并查看源代码，您看到了多少 tbody？
另一个问题：<tbody> 不应该在循环中。
问题与表格有关，与 ajax 无关

标签： jquery html asp.net ajax

【解决方案1】：

你可以改变你的代码如下：

var th_table = $('#table-id');
var tmpMonth;
$(data).each(function (index, th) {
   var html = '';
   if (tmpMonth !== th.MONTHNAME) {
      html = '<tr>'
           + '<td rowspan="2" class="text-left">' + th.MONTHNAME + '</td>'
           + '<td class="text-left">' + th.CATEGORY + '</td>'
           + '<td class="text-left">' + th.NOOFDAYS + '</td>'
           + '</tr>';   
      tmpMonth = th.MONTHNAME;
   } else {
      html = '<tr>'
           + '<td class="text-left">' + th.CATEGORY + '</td>'
           + '<td class="text-left">' + th.NOOFDAYS + '</td>'
           + '</tr>';  
   }

   th_table.append(html);
});

请注意，数据必须按MONTHNAME排序。

或按MONTHNAME对您的数据进行分组，然后循环分组结果。

var groupedResult = _.groupBy(data, function(d) { return d.MONTHNAME; });
_.forEach(groupedResult, funcation(values, key) {
  // key is your MONTHNAME
  // values is an array
  html = '<tr>'
           + '<td rowspan="' + values.length + '" class="text-left">' + values[0].MONTHNAME + '</td>'
           + '<td class="text-left">' + values[0].CATEGORY + '</td>'
           + '<td class="text-left">' + values[0].NOOFDAYS + '</td>'
           + '</tr>';   
  th_table.append(html);

  for(var i = 1; i < values.length; i++ ){
    html = '<tr>'
           + '<td class="text-left">' + values[i].CATEGORY + '</td>'
           + '<td class="text-left">' + values[i].NOOFDAYS + '</td>'
           + '</tr>';   
    th_table.append(html);
  }

});

【讨论】：

动态行跨度怎么样？
您可以使用 lodash 对数据进行分组并循环。我稍后会更新我的答案。