带有JavaScript的HTML表列组

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

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

这就是我们想要的结果

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');
 }
}

函数getResult（id=null）{ 如果（id）{ $.ajax({ url:'fetch.php'， 键入：“post”， 数据：{id:id}， 数据类型：“json”， 成功：功能（响应）{ $（“#Id”）.html（response.result1.Id）； $（“#client”）.html（response.result1.client）； $（“#reg_Date”）.html（response.result1.reg_Date）； $（“#截止日期”）.html（response.result1.due_date）； response.result2.forEach（函数（元素）{ 控制台日志（元素）； var category=element.category； var name=element.name； var Result=element.Result； $（'table tr'）。长度； html=''； html+=''+category+'

'； html+=''； $（'table'）.append（html）； $（'table tr'）。长度； html=''； html+=''+names+'

'； html+=''+Result+'

'； html+=''； $（'table'）.append（html）； }); } }); }否则{ 警报（“错误”）； } }

---

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

// 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;
    }

    ...

//将最后一个类别输出存储在此处
var lastCategory=null；
response.result2.forEach（函数（元素）{
控制台日志（元素）；
var category=element.category；
var name=element.name；
var Result=element.Result；
//类别是否不同？请将其输出
如果（lastCategory！=类别）{
$（'table tr'）。长度；
html=''；
html+=''+category+'
'；
html+=''；
$（'table'）.append（html）；
//更新最后一个类别
lastCategory=类别；
}
...