带有 JavaScript 的 HTML 表格列组答案

【问题标题】：HTML table column group with JavaScript带有 JavaScript 的 HTML 表格列组
【发布时间】：2019-01-05 22:18:53
【问题描述】：

我正在使用 Ajax 和 PHP 在数组 result1 和 result2 中从数据库中获取多个表数据，并且我正在尝试在我希望表的第一个 tr 作为组列的表中显示 result2 数据。

我正在尝试使用以下脚本，但它给出了这个结果。

这就是想要的结果。

JS 脚本

function getResult(id = null) {
if(id) {
    $.ajax({
        url: 'fetch.php',
        type: 'post',
        data: {id: id},
        dataType: 'json',
        success:function(response) {      

            $("#Id").html(response.result1.id);
            $("#client").html(response.result1.client);
            $("#reg_Date").html(response.result1.reg_Date);
            $("#due_date").html(response.result1.due_date);

            response.result2.forEach(function(element) {
            console.log(element);
            var category = element.category;
            var names= element.name;
            var Result = element.result;

                $('table tr').length;
                html = '<tr>';
                html += '<td><p>'+category+'</p></td>';
                 html += '</tr>';
                $('table').append(html);

                $('table tr').length;
                html = '<tr>';
                html += '<td><p>'+names+'</p></td>';
                html += '<td><p>'+Result+'</p></td>';
                html += '</tr>';
                $('table').append(html);
        });
    }
   });
  } else {
        alert('error');
 }
}

【问题讨论】：

标签： javascript ajax html-table

【解决方案1】：

您需要检查类别名称是否不同，如果相同则跳过输出另一个类别：

// Store the last category output here
var lastCategory = null;
response.result2.forEach(function(element) {
    console.log(element);
    var category = element.category;
    var names= element.name;
    var Result = element.result;

    // Is the category different? Output it
    if (lastCategory != category) {
        $('table tr').length;
        html = '<tr>';
        html += '<td><p>'+category+'</p></td>';
        html += '</tr>';
        $('table').append(html);
        // Update the last category
        lastCategory = category;
    }

    ...

【讨论】：