来自 json 数组的 HTML 表中的动态和复杂行跨度

Question

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

预期结果：

问题：寻找 Jquery 或 javascript 解决方案来创建动态表以及 Rowspan。我在获取父行并添加行跨度时遇到问题。

非常感谢您的帮助。

这是我的 JSON 格式和我想要实现的目标：

var data={"result": [

    {

      "RMP_MASTER_WILAYAH_ID": "20190402080337958516",

      "RMP_MASTER_WILAYAH_KODE": "02",

      "RMP_MASTER_WILAYAH_detail": [

        {

          "RMP_MASTER_WILAYAH_ID": "20190402080403561417",

          "RMP_MASTER_WILAYAH": "KUALA ENOK",

          "RMP_MASTER_WILAYAH_relasi": [

            {

              "RMP_MASTER_PERSONAL_ID": "20190329144213331884",

              "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": "20190402080411413459",

          "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",

            }

          ]

        }

      ]

Answer 1

我试过解决你的问题。下面是 createRowHTML 函数的变化。function createRowHTML() {&nbsp; &nbsp; var tableContent = "";&nbsp; &nbsp; for (var result = 0; result < data.result.length; result++) {&nbsp; &nbsp; &nbsp; &nbsp; // calculate rowspan for first cell&nbsp; &nbsp; &nbsp; &nbsp; var rowspan = 0;&nbsp; &nbsp; &nbsp; &nbsp; var detailLength = data.result[result].RMP_MASTER_WILAYAH_detail.length;&nbsp; &nbsp; &nbsp; &nbsp; rowspan += detailLength;&nbsp; &nbsp; &nbsp; &nbsp; for (var i = 0; i < detailLength; i++) {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; rowspan += data.result[result].RMP_MASTER_WILAYAH_detail[i].RMP_MASTER_WILAYAH_relasi.length;&nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; &nbsp; &nbsp; // create rows&nbsp; &nbsp; &nbsp; &nbsp; tableContent += "<tr><td rowspan=" + parseInt(1 + rowspan) + ">" + data.result[result].RMP_MASTER_WILAYAH_KODE + "</td></tr>";&nbsp; &nbsp; &nbsp; &nbsp; var relasiLength = 0;&nbsp; &nbsp; &nbsp; &nbsp; for (var i = 0; i < detailLength; i++) {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; relasiLength = data.result[result].RMP_MASTER_WILAYAH_detail[i].RMP_MASTER_WILAYAH_relasi.length;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; tableContent += "<tr><td rowspan=" + parseInt(1 + relasiLength) + ">"&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; + data.result[result].RMP_MASTER_WILAYAH_detail[i].RMP_MASTER_WILAYAH + "</td></tr>";&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; for (var j = 0; j < relasiLength; j++) {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; tableContent += "<tr><td>" + data.result[result].RMP_MASTER_WILAYAH_detail[i].RMP_MASTER_WILAYAH_relasi[j].RMP_MASTER_PERSONAL_NAMA + "</td></tr>";&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; }&nbsp; &nbsp; $("tbody#zone_data").append(tableContent);}$(function () {&nbsp; &nbsp; createRowHTML();});工作示例： http:&nbsp;//jsfiddle.net/w8r2a9vs/

Answer 2

您可以使用二叉树的逻辑。对于您来说，问题可以跟踪所有没有子节点的节点，在顶部父节点上，将 +1 添加到 rowspan 到任何父节点在没有孩子的示例节点中&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{ &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;"RMP_MASTER_PERSONAL_ID":&nbsp;"20200325091038411761", &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;"RMP_MASTER_PERSONAL_NAMA":&nbsp;"M.&nbsp;TANG", &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}第一个父母收到 2 行跨度“点”，下一个父母有他的孩子的行跨度总和算法：1 遍历所有节点，2 如果找到没有子节点的节点遍历他的所有父节点并向“rowspan”添加+1