带有JavaScript的HTML表格列组

Question

我在数据库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');
 }
}

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

    ...