Link to JSFiddle

Here is my JSON format

{
    "result": {
        "buildname1": [{
            "table1": ["xxx","yyy"]
        }, {
            "table2": ["xxx","yyy"]
        }, {
            "table3": ["xxx","yyy"]
        }],
        "buildname2": [{
            "table1": ["xxx","yyy"]
        }, {
            "table2": ["xxx","yyy"]
        }, {
            "table3": ["xxx","yyy"]
        }]
    },
    "Build sets": "yyy",
    "destinationPath": "xxx",
    "status": 1
}

This is the function which I am using to dynamically create the table.

function generateTable(data){ //data is the parsed JSON Object from an ajax request
    $("#test-table tbody").empty();//Empty the table first
    if(data.result != null){
        $.each(data.result,function(key,value){
            var buildName ="<tr><td rowspan='"+value.length+"'>"+key+"<span class='cyan darken-1 white-text badge'>"+value.length+" base tables</span></td>";
            var baseTable ="";
            for(i=0;i<value.length;i++){
                if( i == 0 ){
                    for(var k in value[0]){
                        baseTable ="<td rowspan='"+value[0][k].length+"'>"+k+"</td></tr>";
                    }
                }
                else{
                    for(var key in value[i]){
                        baseTable = baseTable + "<tr><td rowspan='"+value[i][key].length+"'>"+key+"</td></tr>";
                    }
                }
            }
            $("#test-table").append(buildName + baseTable);
        });
    }
}

Here is what I am trying to achieve

HTML

<table id="test-table" class="bordered responsive-table">
  <thead>
    <tr>
      <th>Build Name</th><th>Base Table</th><th>Query List</th>
    </tr>
  </thead>
</table>

Question :

I successfully created the first two columns(though somewhat ugly, thought I can refine it later), I'm stuck at the third column. The code I posted creates the first two columns correctly but the logic for the rowspan within the rowspan(third column) seems to elude me. Please guide me.

Link to JSFiddle

Here is my JSON format

{
    "result": {
        "buildname1": [{
            "table1": ["xxx","yyy"]
        }, {
            "table2": ["xxx","yyy"]
        }, {
            "table3": ["xxx","yyy"]
        }],
        "buildname2": [{
            "table1": ["xxx","yyy"]
        }, {
            "table2": ["xxx","yyy"]
        }, {
            "table3": ["xxx","yyy"]
        }]
    },
    "Build sets": "yyy",
    "destinationPath": "xxx",
    "status": 1
}

This is the function which I am using to dynamically create the table.

function generateTable(data){ //data is the parsed JSON Object from an ajax request
    $("#test-table tbody").empty();//Empty the table first
    if(data.result != null){
        $.each(data.result,function(key,value){
            var buildName ="<tr><td rowspan='"+value.length+"'>"+key+"<span class='cyan darken-1 white-text badge'>"+value.length+" base tables</span></td>";
            var baseTable ="";
            for(i=0;i<value.length;i++){
                if( i == 0 ){
                    for(var k in value[0]){
                        baseTable ="<td rowspan='"+value[0][k].length+"'>"+k+"</td></tr>";
                    }
                }
                else{
                    for(var key in value[i]){
                        baseTable = baseTable + "<tr><td rowspan='"+value[i][key].length+"'>"+key+"</td></tr>";
                    }
                }
            }
            $("#test-table").append(buildName + baseTable);
        });
    }
}

Here is what I am trying to achieve

HTML

<table id="test-table" class="bordered responsive-table">
  <thead>
    <tr>
      <th>Build Name</th><th>Base Table</th><th>Query List</th>
    </tr>
  </thead>
</table>

Question :

I successfully created the first two columns(though somewhat ugly, thought I can refine it later), I'm stuck at the third column. The code I posted creates the first two columns correctly but the logic for the rowspan within the rowspan(third column) seems to elude me. Please guide me.

• javascript
• jquery
• html

• 2 Do you have an issue with this? If so, please give details of the problem. At the moment there's no question here – Rory McCrossan Commented Jul 12, 2016 at 13:36
• @RoryMcCrossan am sorry. I posted the question too early without properly checking it first – Magesh Kumaar Commented Jul 12, 2016 at 13:37
• It would also be useful to have your html, even if we can guess it in this case, please take the habit of posting it in your question or in a codepen/jsfiddle – RDardelet Commented Jul 12, 2016 at 13:40
• 1 @RobinDardelet jsfiddle/80ek406h – Magesh Kumaar Commented Jul 12, 2016 at 13:53
• 1 @MageshKumaar I think I figured out how to achieve what you are looking for. Check out my answer and let me know. Thanks! – mhodges Commented Jul 12, 2016 at 15:58

2 Answers 2

I honestly had never used rowspan before, but after reading this stack answer I understood it much better - I would highly remend you do the same. After that, it was just a matter of figuring out the order of the elements from JSON into the DOM.

Here is a WORKING DEMO:

var data = '{"result":{"buildname1":[{"table1":["xxx","yyy", "zzz"]},{"table2":["xxx","yyy"]}],"buildname2":[{"table1":["xxx","yyy", "zzz"]},{"table2":["xxx","yyy"]},{"table3":["xxx","yyy"]}], "buildname3":[{"table1":[]},{"table2":["xxx","yyy"]},{"table3":[]}], "buildname4":[]},"Build sets":"yyy","destinationPath":"xxx","status":1}';

function generateTable(data) { //data is the parsed JSON Object from an ajax request
  data = JSON.parse(data);
  $("#test-table tbody").empty(); //Empty the table first
  Object.entries(data.result).forEach(([key, elem]) => {
    var baseHtml = "";
    var childrenHtml = "";
    var maxRowSpan = 0;
    elem.forEach((inner_elem, index) => {
      var [innerElemKey, arr] = Object.entries(inner_elem)[0];
      var elemRowSpan = Math.max(arr.length, 1);
      maxRowSpan += elemRowSpan;

      if (index !== 0) {
        childrenHtml += "<tr>";
      } 
      childrenHtml += ('<td rowspan="' + elemRowSpan + '">' + innerElemKey + '</td>');
      
      arr.forEach((child, indx) => {
        if (indx !== 0) {
          childrenHtml += "</tr>";
        }
        childrenHtml += ('<td rowspan="1">' + child + '</td>' + '</tr>');
      });
    });
    baseHtml += ('<tr><td rowspan="' + Math.max(maxRowSpan, 1) + '">' + key + '</td>');
    $("#test-table").append(baseHtml + childrenHtml);
  });
}

$(function() {
  generateTable(data);
});

td {
  border: 1px solid black;
}

<script src="https://ajax.googleapis./ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table id="test-table" class="bordered responsive-table">
  <thead>
    <tr>
      <th>Build Name</th>
      <th>Base Table</th>
      <th>Query List</th>
    </tr>
  </thead>
</table>

#Static HTML

<table id="test-table" class="bordered responsive-table">
  <thead>
    <tr>
      <th>Build Name</th><th>Base Table</th><th>Query List</th>
    </tr>
  </thead>
</table>

#Generated HTML

<table id="test-table" class="bordered responsive-table">
  <thead>
    <tr>
      <th>Build Name</th>
      <th>Base Table</th>
      <th>Query List</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td rowspan="5">buildname1</td>
      <td rowspan="3">table1</td>
      <td rowspan="1">xxx</td>
    </tr>
    <tr>
      <td rowspan="1">yyy</td>
    </tr>
    <tr>
      <td rowspan="1">zzz</td>
    </tr>
    <tr>
      <td rowspan="2">table2</td>
      <td rowspan="1">xxx</td>
    </tr>
    <tr>
      <td rowspan="1">yyy</td>
    </tr>
    <tr>
      <td rowspan="7">buildname2</td>
      <td rowspan="3">table1</td>
      <td rowspan="1">xxx</td>
    </tr>
    <tr>
      <td rowspan="1">yyy</td>
    </tr>
    <tr>
      <td rowspan="1">zzz</td>
    </tr>
    <tr>
      <td rowspan="2">table2</td>
      <td rowspan="1">xxx</td>
    </tr>
    <tr>
      <td rowspan="1">yyy</td>
    </tr>
    <tr>
      <td rowspan="2">table3</td>
      <td rowspan="1">xxx</td>
    </tr>
    <tr>
      <td rowspan="1">yyy</td>
    </tr>
  </tbody>
</table>

This Question is Little Different and I can't find the answer, First of all, how it Works

1. Ask for total Row and Column.
2. Then ask for Rowspan and Colspan for each row and count as a Column.
3. Total Column is Row*Column Right.
4. But when we have give that Row as 2 they will occupy another column so they have some logic this code is too many lines but it works.
5. Lets Have fun and Check out now...

function copytext()
        {
            var output = document.querySelector(".output");
            navigator.clipboard.writeText(output.value);
            alert("Text has been Copied!");
        }
        document.querySelector(".clear").addEventListener("click", () => {
            var output = document.querySelector(".output");
            if(confirm("You want to Clear Code text ?") == true)
            {
                output.innerHTML = "";
            }
        });

        function run()
        {
            var output = document.querySelector(".output");
            var row = parseInt(prompt("Enter Row : "));
            var col = parseInt(prompt("Enter Column : "));

            var col_helps = new Array(row);
            // Assigning Values in Array with columns
            for(var i=0;i<row;i++)
            {
                col_helps[i] = col;
            }
            var loop = 0, count_col = 0;
            var startTag = "", col_newTag = "\n<tr>", onlyOpenTag = "\n<tr>", closeTag = "\n</tr>";
            var checkOpen = 0, all_Count = 0, col_newCheck = 0, check_Zero = 0;

            while(true)
            {
                var row_user = parseInt(prompt("Enter Rowspan User : "));
                var col_user = parseInt(prompt("Enter Colspan User : "));
                var textInsert = prompt("Enter Content to Cell : ");

                if(isNaN(row_user)){ row_user = 1}
                if(isNaN(col_user)){ col_user = 1}

                all_Count = parseInt(all_Count) + (row_user*col_user);
                // Td tag
                var text = "\n<td rowspan=\""+row_user+"\" colspan=\""+col_user+"\">"+textInsert+"</td>";
                var text1 = "\n<td>"+textInsert+"</td>";
                var text2 = "\n<td colspan=\""+col_user+"\">"+textInsert+"</td>";
                var text3 = "\n<td rowspan=\""+row_user+"\">"+textInsert+"</td>";

                // Setting Column Length
                var col_length_of_row = col_helps[loop];

                count_col = parseInt(count_col) + col_user;

                if((col_length_of_row == col) && (col_newCheck == 0))
                {
                    startTag += col_newTag;
                    col_newCheck = 1;
                }

                if(row_user>1)
                {
                    for(var i=loop;i<(loop+(row_user));i++)
                    {
                        if(i!=loop)
                        {
                            col_helps[i] = parseInt(col_helps[i]) - 1;
                        }
                    }
                    if(col_user>1)
                    {
                        for(var i=loop;i<(loop+(row_user));i++)
                        {
                            if(i!=loop)
                            {
                                col_helps[i] = parseInt(col_helps[i]) - (col_user-1);
                            }
                        }
                    }
                }

                if((row_user==1) && (col_user==1))
                {
                    startTag += text1;
                }
                if((row_user!=1) && (col_user!=1))
                {
                    startTag += text;
                }
                if((row_user==1) && (col_user!=1))
                {
                    startTag += text2;
                }
                if((row_user!=1) && (col_user==1))
                {
                    startTag += text3;
                }
                
                if((count_col >= col_length_of_row) && (col_helps[loop+1] == col) && (all_Count < (row*col))){
                    if(checkOpen != 0)
                    {
                        for(var i=0;i<checkOpen;i++)
                        {
                            startTag += closeTag;
                            checkOpen--;
                        }
                    }
                    if(col_newCheck == 1)
                    {
                        startTag += closeTag;
                        col_newCheck = 0;
                    }

                    for(var i=loop;i<row;i++)
                    {
                        if(col_helps[loop+1] != 0)
                        {
                            loop++;
                            break;
                        }
                        if(col_helps[loop+1] == 0)
                        {
                            check_Zero = 1;
                        }
                    }
                    if(check_Zero == 1)
                    {
                        startTag += closeTag;
                        check_Zero = 0;
                    }
                    count_col = 0;
                }

                if((count_col >= col_length_of_row) && (col_helps[loop+1] != col) && (all_Count < (row*col))){
                    if(checkOpen != 0)
                    {
                        for(var i=0;i<checkOpen;i++)
                        {
                            startTag += closeTag;
                            checkOpen--;
                        }
                    }

                    startTag += onlyOpenTag;
                    checkOpen++;
                    for(var i=loop;i<row;i++)
                    {
                        if(col_helps[loop+1] != 0)
                        {
                            loop++;
                            break;
                        }
                        if(col_helps[loop+1] == 0)
                        {
                            check_Zero = 1;
                        }
                    }

                    if(check_Zero == 1)
                    {
                        startTag += closeTag;
                        check_Zero = 0;
                    }
                    count_col = 0;
                }

                if(all_Count >= (row*col))
                {
                    if(checkOpen != 0)
                    {
                        for(var i=0;i<checkOpen;i++)
                        {
                            startTag += closeTag;
                            checkOpen--;
                        }
                    }
                    startTag += closeTag;
                    output.innerHTML = startTag.trim();
                    break;
                }
            }
        }

*{
            padding: 0;
            margin: 0;
        }
        .container{
            position: relative;
            display: flex;
            flex-direction: column;
            min-height: 100vh;
            justify-content: center;
            align-items: center;
            background-color: indigo;
        }
        .output{
            height: 400px;
            min-width: 300px;
            min-height: 400px;
            width: 500px;
            max-height: 450px;
            max-width: 500px;
            background-color: #eee;
            box-sizing: border-box;
            padding: 10px;
            color: black;
            font-weight: 600;
            border-radius: 5px;
        }
        .create{
            box-sizing: border-box;
            padding: 6px;
            margin: 5px;
            background-color: yellow;
            font-weight: 600;
            font-size: 14px;
        }
        .clear{
            box-sizing: border-box;
            padding: 6px;
            margin: 5px;
            background-color: red;
            color: white;
            font-weight: 600;
            font-size: 14px;
        }
        .copy{
            box-sizing: border-box;
            padding: 6px;
            margin: 5px;
            background-color: black;
            color: white;
            font-weight: 600;
            font-size: 14px;
        }

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Table</title>
</head>
<body>
    
    <div class="container">
        <p>
            <button onclick="run()" class="create">Create Row</button>
            <button class="clear">Clear Content</button>
        </p>
        <textarea class="output" disabled></textarea>
        <button onclick="copytext()" class="copy">Copy Code</button>
    </div>

</body>
</html>