Creating Table Like Structure With Spanned Rows Using Css

October 27, 2023 Post a Comment

I need to use css and dynamically create a table with the JSON array. Something like this : Here I have just passed the cell to be spanned a class of 'spannedrow' , I don't have

Solution 1:

Here's my answer. Let me know what you don't understand. I'm probably missing some validation somewhere... but I think it's a good start. And just play around with border css to get what you want.

var myArr = [{
    "Id": 1,
    "Name": 'Ken',
    "Age": '30',
    "Hobbies": [{
      'HobbyId': 1,
      'HobbyName': 'Swimming'
    }, {
      'HobbyId': 2,
      'HobbyName': 'Reading'
    }],
    "Skills": [{
      'SkillId': 1,
      'SkillName': 'PHP'
    }, {
      'SkillId': 2,
      'SkillName': 'MySQL'
    }],
    "Language": [{
      'LangId': 2,
      'LangName': 'English'
    }, {
      'LangId': 3,
      'LangName': 'Chinese'
    }]
  },
  {
    "Id": 2,
    "Name": 'Mike',
    "Age": '20',
    "Hobbies": [],
    "Skills": [],
    "Language": []
  },
  {
    "Id": 3,
    "Name": 'Charlie',
    "Age": '25',
    "Hobbies": [{
      'HobbyId': 5,
      'HobbyName': 'Dance'
    }, {
      'HobbyId': 6,
      'HobbyName': 'Sing'
    }, {
      'HobbyId': 7,
      'HobbyName': 'Writing'
    }],
    "Skills": [],
    "Language": [{
      'Id': 7,
      'Name': 'English'
    }]
  }
];

// Assuming it's not going to be emptyvar headers = ["Id", "Name", "Age", "HobbyId", "HobbyName", "SkillId", "SkillName", "Id", "Name"];

var containers = ["Hobbies", "Skills", "Language"];

for (let header of headers)
{
  $("#headers").append(`<th>${header}</th>`);
}

// foreach itemfor (let group of myArr)
{
  let span = 1;
  
  // Sets the length of row spanfor (let container of containers)
  {
    span = group[container].length > span ? group[container].length : span;
  }
  
  // for the first/main row of each itemlet temp_tr = $("<tr>");
  for (let item in group)
  {
    // Checking if key is arrayif (Array.isArray(group[item]))
    {
      let insert_value = "";
      //If it is greater than 0 use valueif (group[item].length)
      {
        let temp_keys = Object.keys(group[item][0]);
        for (let tk of temp_keys)
        {
          insert_value += `<td>${group[item][0][tk]}</td>`;
        }
      }
      else
      {
        insert_value += "<td></td><td></td>";
      }
      
      $(temp_tr).append(insert_value);
    }
    else
    {
      $(temp_tr).append(`<td rowspan=${span}>${group[item]}</td>`);
    }

  }
  // Add to tbody
  $("#body").append(temp_tr); 
  
  
  // for each inner itemfor (let i = 1; i < span; i++)
  {
    let temp_tr = $("<tr>");
    
    for (let item of containers)
    {
      let insert_value = "";

      // Only add values if there are anyif (i < group[item].length)
      {
        let temp_keys = Object.keys(group[item][i]);
        for (let tk of temp_keys)
        {
          insert_value += `<td>${group[item][i][tk]}</td>`;
        }
      }
      else
      {
        insert_value += "<td></td><td></td>";
      }
      $(temp_tr).append(insert_value);  
      $("#body").append(temp_tr);
    }
    
  }

  
}

<scriptsrc="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script><tableid="mytable"border=1><thead><tr><thcolspan=3></th><thcolspan=2>Hobbies</th><thcolspan=2>Skills</th><thcolspan=2>Language</th></tr><trid="headers"></tr></thead><tbodyid="body"></tbody></table>

Solution 2:

You can try table structure like,

var myArr = [{
    "Id": 1,
    "Name": 'Ken',
    "Age": '30',
    "Hobbies": [{
      'HobbyId': 1,
      'HobbyName': 'Swimming'
    }, {
      'HobbyId': 2,
      'HobbyName': 'Reading'
    }],
    "Skills": [{
      'SkillId': 1,
      'SkillName': 'PHP'
    }, {
      'SkillId': 2,
      'SkillName': 'MySQL'
    }],
    "Language": [{
      'LangId': 2,
      'LangName': 'English'
    }, {
      'LangId': 3,
      'LangName': 'Chinese'
    }]
  },
  {
    "Id": 2,
    "Name": 'Mike',
    "Age": '20',
    "Hobbies": [],
    "Skills": [],
    "Language": []
  },
  {
    "Id": 3,
    "Name": 'Charlie',
    "Age": '25',
    "Hobbies": [{
      'HobbyId': 5,
      'HobbyName': 'Dance'
    }, {
      'HobbyId': 6,
      'HobbyName': 'Sing'
    }, {
      'HobbyId': 7,
      'HobbyName': 'Writing'
    }],
    "Skills": [],
    "Language": [{
      'LangId': 7,
      'LangName': 'English'
    }]
  }
];

functiongetRows(obj,maxRow,id,name){
  var div='';
  if (obj.length || maxRow) {
      div += "<table>";
      obj.length && $(obj).each(function() {
      
          div += '<tr><td width="40%">' + this[id] + '</td><td width="60%">' + this[name] + '</td></tr>';
      });
      if(obj.length<maxRow){
        for(var i=0,l=maxRow-obj.length;i<l;i++){
          div += '<tr><td width="40%">&nbsp;</td><td  width="60%">&nbsp;</td></tr>';
        }
      }
      div += '</table>';
    }
    return div;
}


var div = "<table border='1' style='border:1px solid #000;' cellpadding='0' cellspacing='0' >";
div += '<tr><td colspan="3"></td>' +
  '<td>Hobbies</td><td>Skills</td><td>Languages</td></tr>';
div += '<tr><td>Id</td><td>Name</td><td>Age</td>' +
  '<td><table><tr><td width="40%">Hobby Id</td><td  width="60%">Hobby Name</td></tr></table>'+
  '<td><table><tr><td width="40%">Skill Id</td><td  width="60%">Skill Name</td></tr></table>'+
  '<td><table><tr><td width="40%">Language Id</td><td  width="60%">Language Name</td></tr></table>';
for (var i = 0; i < myArr.length; i++) {
  var arrHobies = myArr[i]['Hobbies'];
  var arrSkills = myArr[i]['Skills'];
  var arrLanguage = myArr[i]['Language'];
  var maxRow=Math.max(arrHobies.length,arrSkills.length,arrLanguage.length);
  div += "<tr>";
  div += "<td valign='top' class='pad-5'>" + myArr[i]['Id'] + "</td>";
  div += "<td valign='top' class='pad-5'>" + myArr[i]['Name'] + "</td>";
  div += "<td valign='top' class='pad-5'>" + myArr[i]['Age'] + "</td>";
  div += '<td>'+
          getRows(arrHobies,maxRow,'HobbyId','HobbyName')+
          '</td>';
  div += '<td>'+
          getRows(arrSkills,maxRow,'SkillId','SkillName')+
          '</td>';
  div += '<td>'+
          getRows(arrLanguage,maxRow,'LangId','LangName')+
          '</td>'; 
  div += "</tr>"
}
div += "</table>";
$(div).appendTo('body');

table {
  border-collapse:collapse;
  width:100%;
}
tabletabletd {
  border: 1px solid black;
  padding:5px;

}
.pad-5{padding:5px}
tabletabletr:first-child td {
  border-top: 0;
}
tabletabletr:last-childtd {
  border-bottom: 0;
}
tabletabletrtd:first-child {
  border-left: 0;
}
tabletabletrtd:last-child{
  border-right: 0;
}

<linkhref="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"rel="stylesheet"/><scriptsrc="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

Updated for dynamic data,

var myArr = [{
            "ItemMasterNumber": "290015",
            "IM_Description": "XXX5",
            "IM_FirstProcessDate": "10-19-2016",
            "IM_Alias": "test",
            "ItemFeatureSet": [{
                "FS_Id": "2002",
                "FS_Code": "XXX5",
                "FS_Name": "XXX5",
                "FS_Description": "XXX5"
            }],
            "ItemFeatures": [{
                "FE_Id": "1864",
                "FE_Value": "VERSION",
                "FE_Name": "2017"
            },
            {
                "FE_Id": "1865",
                "FE_Value": "EDITION",
                "FE_Name": "Deluxe"
            }
            ],
            "ItemCharges": [{
                "CH_ChargeId": "23004746",
                "CH_Name": "XXX5",
                "CH_Description": "",
                "CH_Type": "One Time"
            }],
            "ItemChargeAttributes": [{
                "CA_Id": "1628",
                "CA_ListPrice": "99",
                "CA_FairValueBasis": "BESP"
            }],
            "ItemPackages": [{
                "PA_PackageId": "21004482"
            }],
            "ItemPackagesComponents": [{
                "PA_Id": "9189",
                "PA_Type": "Feature Set"
            }, {
                "PA_Id": "9190",
                "PA_Type": "Charge"
            }],
            "ItemOffers": [{
                "OF_OfferId": "20003880",
                "OF_Name": "XXX5"
            }],
            "ItemOffersComponents": [{
                "OC_Id": "3877",
                "OC_Quantity": "",
                "OC_AdjustmentAmount": ""
            }]
        },{
  "ItemMasterNumber": "290015",
  "IM_Description": "XXX5",
  "IM_FirstProcessDate": "10-19-2016",
  "IM_Alias": "test",
  "ItemFeatureSet": [{
    "FS_Id": "2002",
    "FS_Code": "XXX5",
    "FS_Name": "XXX5",
    "FS_Description": "XXX5"
  }],
  "ItemFeatures": [{
      "FE_Id": "1864",
      "FE_Value": "VERSION",
      "FE_Name": "2017"
    },
    {
      "FE_Id": "1865",
      "FE_Value": "EDITION",
      "FE_Name": "Deluxe"
    }
  ],
  "ItemCharges": [{
    "CH_ChargeId": "23004746",
    "CH_Name": "XXX5",
    "CH_Description": "",
    "CH_Type": "One Time"
  }],
  "ItemChargeAttributes": [{
    "CA_Id": "1628",
    "CA_ListPrice": "99",
    "CA_FairValueBasis": "BESP"
  }],
  "ItemPackages": [{
    "PA_PackageId": "21004482"
  }],
  "ItemPackagesComponents": [{
    "PA_Id": "9189",
    "PA_Type": "Feature Set"
  }, {
    "PA_Id": "9190",
    "PA_Type": "Charge"
  }],
  "ItemOffers": [{
    "OF_OfferId": "20003880",
    "OF_Name": "XXX5"
  }],
  "ItemOffersComponents": [{
    "OC_Id": "3877",
    "OC_Quantity": "",
    "OC_AdjustmentAmount": ""
  }]
}];
var table = '<table border="1"><tr>',
        tblArray=[],
        isFirstRow = true;

        for (var i = 0, cols = Object.keys(myArr[0]), l = cols.length; i < l; i++) {
            table += '<th>' + cols[i] + '</th>';
        };
        table += '</tr>';

        tblArray.push(table);
        $.each(myArr, function(index, myObj) {
            table = '<tr>';

            $.each(myObj, function(key, data) {
                isFirstRow = !index;
                if ($.isArray(data)) {
                    if (isFirstRow) {
                        table += '<td><table><tr>';

                        for (var i = 0, cols = Object.keys(data[0]), l = cols.length; i < l; i++) {
                            table += '<th>' + cols[i] + '</th>';
                        }
                        table += '</tr>';
                        isFirstRow=false;
                    } else {
                        table += '<td><table>';
                    }               
                    $.each(data, function(k, val) {
                        table += '<tr>';
                        $.each(val, function(j, v) {
                            table += '<td> ' + v + ' </td>';
                        });
                        table += '</tr>';
                    });
                    table += '</table></td>';
                } else {
                    data = data.trim().length==0 ? '&nbsp;':data;
                    table += '<td> ' + data + ' </td>';
                }


            });
            isFirstRow = false;
            table += '</tr>';
            tblArray.push(table);
        });

        $(tblArray.join()).appendTo('body');

        $('table th').each(function(){
            $(this).text(function(){
                return $(this).text().replace(/([A-Z])/g, ' $1').replace('_',' ')
                // uppercase the first character
                .replace(/^./, function(str){ return str.toUpperCase(); })
        });
    });

table {
  border-collapse: collapse;
  width: 100%;
}

tabletabletd,
tabletableth {
  border: 1px solid black;
}

.pad-5 {
  padding: 5px
}

tabletabletr:first-child td,
tabletabletr:first-child th {
  border-top: 0;
}

tabletabletr:last-childtd,
tabletabletr:last-childth {
  border-bottom: 0;
}

tabletabletrtd:first-child,
tabletabletrth:first-child {
  border-left: 0;
}

tabletabletrtd:last-child,
tabletabletrth:last-child {
  border-right: 0;
}

<linkhref="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"rel="stylesheet" /><scriptsrc="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

Html5 Tips

Creating Table Like Structure With Spanned Rows Using Css

Solution 1:

Solution 2:

Post a Comment for "Creating Table Like Structure With Spanned Rows Using Css"