Question posted in
You can find the official documentation here.

Dynamic & Complex rowspan in HTML table from json array – Jquery ajax

I wanted to achieve similar result as shown in below image.

Expected result:

Expected result

Question: Looking for Jquery or javascript solution to create dynamic table along with Rowspan. I am facing issue to get the parent row and add the rowspan.

Your help is much appreciated.

Here is my JSON format and what I am trying to achieve:

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",
            }
          ]
        }
      ]
    },
    {
      "RMP_MASTER_WILAYAH_ID": "20190402080607764729",
      "RMP_MASTER_WILAYAH_KODE": "03",
      "RMP_MASTER_WILAYAH_detail": [
        {
          "RMP_MASTER_WILAYAH_ID": "20190402132520833736",
          "RMP_MASTER_WILAYAH": "PULAU KIJANG",
          "RMP_MASTER_WILAYAH_relasi": [
            {
              "RMP_MASTER_PERSONAL_ID": "20190402132304152471",
              "RMP_MASTER_PERSONAL_NAMA": "H. BAHARUDIN",
            },
            {
              "RMP_MASTER_PERSONAL_ID": "20190402132622621585",
              "RMP_MASTER_PERSONAL_NAMA": "HM. NUR HDP",
            }
          ]
        },
        {
          "RMP_MASTER_WILAYAH_ID": "20190402140031812644",
          "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": "M. TANG",
            }
          ]
        },
        {
          "RMP_MASTER_WILAYAH_ID": "20190402140141611248",
          "RMP_MASTER_WILAYAH": "KOTA BARU",
          "RMP_MASTER_WILAYAH_relasi": [
            {
              "RMP_MASTER_PERSONAL_ID": "20190402140121737955",
              "RMP_MASTER_PERSONAL_NAMA": "H. RAMLI",
            },
            {
              "RMP_MASTER_PERSONAL_ID": "20190402140908815557",
              "RMP_MASTER_PERSONAL_NAMA": "H. SYAMSUDDIN",
            }
          ]
        }
      ]
    }
  ]
};
function createRowHTML(){
          var record='';	
					var record1Nya='';	
					var record_detailNya='';
					
					var record1=[];	
					var record_detail=[];
					
					var record1_relasi=[];	
					var record_relasi_detail=[];	
					
					var jlhRowRelasi=[];
					var jlhRowDetailWilayah=0;
					var jlhRowSpan=0;
          
					for(i=0;i<data.result.length;i++)
					{
						var jlhRowDetailWilayah=data.result[i].RMP_MASTER_WILAYAH_detail.length;
						for(iDetail=0;iDetail<data.result[i].RMP_MASTER_WILAYAH_detail.length;iDetail++)
						{
							jlhRowRelasi[i]=data.result[i].RMP_MASTER_WILAYAH_detail[iDetail].RMP_MASTER_WILAYAH_relasi.length;
							for(iRelasi=0;iRelasi<data.result[i].RMP_MASTER_WILAYAH_detail[iDetail].RMP_MASTER_WILAYAH_relasi.length;iRelasi++)
							{
								if(iRelasi==0)
								{
									record1_relasi[i] = record1_relasi[i]+"<td>"+
																			data.result[i].RMP_MASTER_WILAYAH_detail[iDetail].RMP_MASTER_WILAYAH_relasi[iRelasi].RMP_MASTER_PERSONAL_NAMA+
																	"</td>";
								}else
								{
									record_relasi_detail[i] = record_relasi_detail[i]+"<tr>"+
												"<td>"+
													data.result[i].RMP_MASTER_WILAYAH_detail[iDetail].RMP_MASTER_WILAYAH_relasi[iRelasi].RMP_MASTER_PERSONAL_NAMA+
												"</td>"+
											"</tr>";
								}
							}
							
							
							if(iDetail==0)
							{
								record1[i] = record1[i]+"<td rowspan='"+jlhRowRelasi[i]+"'>"+
													data.result[i].RMP_MASTER_WILAYAH_detail[iDetail].RMP_MASTER_WILAYAH+
											"</td>"+record1_relasi[i];
							}else
							{
								record_detail[i] = record_detail[i]+"<tr>"+
											"<td rowspan='"+jlhRowRelasi[i]+"'>"+
												data.result[i].RMP_MASTER_WILAYAH_detail[iDetail].RMP_MASTER_WILAYAH+
											"</td>"+
										"</tr>"+record_relasi_detail[i];
							}
						}
							
						record1Nya=record1[i];
						record_detailNya=record_detail[i];
						
				
						jlhRowSpan=parseInt(jlhRowDetailWilayah)+parseInt(jlhRowRelasi);
						record = record+"<tr>"+
											"<td rowspan='"+jlhRowSpan+"'>"+
												data.result[i].RMP_MASTER_WILAYAH_KODE+
											"</td>"+
											record1Nya+
										"</tr>"+record_detailNya;					
					}
					
					
					$("tbody#zone_data").html(record);
}
$(function(){
	createRowHTML();
});
<table>
				<tr>
					<td>Wil</td>
					<td>Lokasi</td>
					<td>Relasi</td>
         </tr>
				<tbody id="zone_data">
				</tbody>
			</table>

This is the result

Tags:

2

Answers


  1. 0

    You can use logic of binary tree. For you problem can trace all nodes without children, on top parent, adding +1 to rowspan to any parent

    in your example node without childrens 

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

    first parent receive 2 rowspan “points”, next parent have summ of rowspans of his children

    Algoritm:

    1 traversal all nodes,

    2 if finded node without childres travers all his parents and add +1 to “rowspan”

    Login or Signup to reply.
  2. 0

    I’ve tried solving your problem. Below are the changes in createRowHTML function.

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

    Working example: http://jsfiddle.net/w8r2a9vs/

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search