Javascript json数组中HTML表中的动态复杂行跨度

我想获得下图所示的类似结果

预期结果：

问题：正在寻找Jquery或javascript解决方案来创建动态表和Rowspan。我面临获取父行并添加行跨度的问题

非常感谢你的帮助

以下是我的JSON格式以及我要实现的目标：

变量数据={结果：[ { RMP_MASTER_WILAYAH_ID:201904020803737958516， RMP_MASTER_WILAYAH_KODE:02， RMP_MASTER_WILAYAH_详图：[ { RMP_MASTER_WILAYAH_ID:20190402080403561417， RMP_MASTER_WILAYAH:KUALA ENOK， RMP_MASTER_WILAYAH_relasi：[ { RMP_MASTER_PERSONAL_ID:2019032914421331884， RMP_MASTER_PERSONAL_NAMA:YANTO KHO， }, { RMP_MASTER_PERSONAL_ID:20190329144712243937， RMP_MASTER_PERSONAL_NAMA:USMAN， } ] }, { RMP_MASTER_WILAYAH_ID:20190402080355461744， RMP_MASTER_WILAYAH:ENOK， RMP_MASTER_WILAYAH_relasi：[ { RMP_MASTER_PERSONAL_ID:20190329150712446114， RMP_MASTER_PERSONAL_NAMA:NURDIN， }, { RMP_MASTER_PERSONAL_ID:20190329151404711228， RMP_MASTER_PERSONAL_NAMA:H.HARUNA RASYID， } ] }, { RMP_MASTER_WILAYAH_ID:2019040208041413459， RMP_MASTER_WILAYAH:PARIT PINANG， RMP_MASTER_WILAYAH_relasi：[ { RMP_MASTER_PERSONAL_ID:20190329153052471217， RMP_MASTER_PERSONAL_NAMA:SUWANDI， }, { RMP_MASTER_PERSONAL_ID:20190329153610274231， RMP_MASTER_PERSONAL_NAMA:BEDDU， } ] } ] }, { RMP_MASTER_WILAYAH_ID:20190402080607464729， RMP_MASTER_WILAYAH_KODE:03， RMP_MASTER_WILAYAH_详图：[ { RMP_MASTER_WILAYAH_ID:201904021320833736， RMP_MASTER_WILAYAH：基江岛， RMP_MASTER_WILAYAH_relasi：[ { RMP_MASTER_PERSONAL_ID:20190402132304152471， RMP_MASTER_PERSONAL_NAMA:H.BAHARUDIN， }, { RMP_MASTER_PERSONAL_ID:20190402132622621585， RMP_MASTER_PERSONAL_NAMA:嗯，努尔·赫德普， } ] }, { RMP_MASTER_WILAYAH_ID:2019040214030031812644， RMP_MASTER_WILAYAH:BENTENG， RMP_MASTER_WILAYAH_relasi：[ { RMP_MASTER_PERSONAL_ID:20190402135920441438， RMP_MASTER_PERSONAL_NAMA:SURGAWI， }, { RMP_MASTER_PERSONAL_ID:20200325091038411761， RMP_MASTER_PERSONAL_NAMA:唐先生， } ] }, { RMP_MASTER_WILAYAH_ID:20190402140141611248， RMP_MASTER_WILAYAH:KOTA BARU， RMP_MASTER_WILAYAH_relasi：[ { RMP_主控_个人识别码：201904021401211737955， RMP_MASTER_PERSONAL_NAMA:H.RAMLI， }, { RMP_MASTER_PERSONAL_ID:201904021409008815557， RMP_MASTER_PERSONAL_NAMA:H.SYAMSUDDIN， } ] } ] } ] }; 函数createRowHTML{ var记录=； var record1Nya=； var记录_detailNya=； var record1=[]； var记录_详细信息=[]； var记录1_relasi=[]； var记录相关详细信息=[]； var jlhRowRelasi=[]； var jlhRowDetailWilayah=0； var jlhRowSpan=0；

---

对于i=0；i您可以使用二叉树的逻辑。对于您的问题，可以跟踪没有子节点的所有节点，在顶部父节点上，将+1添加到任何父节点的rowspan

在您的示例中，节点没有子节点

        {
          "RMP_MASTER_PERSONAL_ID": "20200325091038411761",
          "RMP_MASTER_PERSONAL_NAMA": "M. TANG",
        }

第一位家长获得2个行间距点，下一位家长获得其子女的行间距总和

算法：

1遍历所有节点

---

2如果找到的节点没有子节点，则遍历其所有父节点并将+1添加到行span

我已尝试解决您的问题。下面是createRowHTML函数中的更改

function createRowHTML() {
    var tableContent = "";
    for (var result = 0; result < data.result.length; result++) {
        // calculate rowspan for first cell
        var rowspan = 0;
        var detailLength = data.result[result].RMP_MASTER_WILAYAH_detail.length;
        rowspan += detailLength;
        for (var i = 0; i < detailLength; i++) {
            rowspan += data.result[result].RMP_MASTER_WILAYAH_detail[i].RMP_MASTER_WILAYAH_relasi.length;
        }

        // create rows
        tableContent += "<tr><td rowspan=" + parseInt(1 + rowspan) + ">" + data.result[result].RMP_MASTER_WILAYAH_KODE + "</td></tr>";
        var relasiLength = 0;
        for (var i = 0; i < detailLength; i++) {
            relasiLength = data.result[result].RMP_MASTER_WILAYAH_detail[i].RMP_MASTER_WILAYAH_relasi.length;
            tableContent += "<tr><td rowspan=" + parseInt(1 + relasiLength) + ">"
                + data.result[result].RMP_MASTER_WILAYAH_detail[i].RMP_MASTER_WILAYAH + "</td></tr>";
            for (var j = 0; j < relasiLength; j++) {
                tableContent += "<tr><td>" + data.result[result].RMP_MASTER_WILAYAH_detail[i].RMP_MASTER_WILAYAH_relasi[j].RMP_MASTER_PERSONAL_NAMA + "</td></tr>";
            }
        }
    }
    $("tbody#zone_data").append(tableContent);
}
$(function () {
    createRowHTML();
});

我希望这对你有帮助

---

工作示例：

感谢您的解释，但我仍然无法解释。您能给出一个javascript源代码示例，以及我在变量数据中编写的JSON格式吗？非常感谢您的帮助@Amrita，这非常有用和酷。请使用我在变量数据中编写的JSON格式如果我想得到以下结果，请再次提供帮助：我已经在fiddle示例中进行了更改，下面是新链接：我希望这就是你需要的。你太棒了….！在你的帮助下，我找到了我需要的。谢谢。你好@Amrita，对不起，我很难标记你或直接从聊天中提问，因此我在这里提问。请提供一个som的粘液 在上的y个帖子