how to create Drill Down table rows

Question

I am creating a table appending data using jQuery. Currently created table as below.

I want to add two more fields as drill down. Can you please guide me how to do so.

Code to append data.

 $("#tableid").append("<tr><td> Product </td> <td >" + Day[0].substring(5, 11) + "</td> <td>" + Day[1].substring(5, 11) + "</td> <td>" + Day[2].substring(5, 11) + "</td><td>" + Day[3].substring(5, 11) + "</td><td>" + Day[4].substring(5, 11) + "</td><td>" + Day[5].substring(5, 11) + "</td><td> Current </td><td> Weekly </td><td> Monthly </td></tr>");
 for (var i = 1; i <= result.length; i++) {
     $("#tableid").append("<tr><td>" + result[i].product + "</td><td><img src='images/" + result[i].Day01 + ".png' /></td><td><img src='images/" + result[i].Day02 + ".png' /><td><img src='images/" + result[i].Day03 + ".png' /></td><td><img src='images/" + result[i].Day04 + ".png' /></td><td><img src='images/" + result[i].Day05 + ".png' /></td><td><img src='images/" + result[i].Day06 + ".png' /></td><td><img src='images/" + result[i].Day07 + ".png' /></td><td><img src='images/" + result[i].WeeklyWeather + ".png' /></td><td><img src='images/" + result[i].MonthlyWeather + ".png' /></td></tr>");
 }

Answer 1

1. Add another tr for each item in the result. Put there data as you want.
2. Hide this row by set the content's height to 0 (For the toggle animation. If don't need the animation just set display:none on the tr.
3. When you click on the tr the code do toggleClass() on the next row (the expandable) and this class remove the height:0 and exposes the content.

var result = [
    { product: 'ESB', Day01: 'yes', Day02: 'yes', Day03: 'yes', Day04: 'yes', Day05: 'yes', Day06: 'yes', Day07: 'yes', WeeklyWeather: 'rain', MonthlyWeather: 'rain' }, { product: 'ML', Day01: 'yes', Day02: 'yes', Day03: 'yes', Day04: 'yes', Day05: 'yes', Day06: 'yes', Day07: 'yes', WeeklyWeather: 'rain', MonthlyWeather: 'rain' }, { product: 'ML', Day01: 'yes', Day02: 'yes', Day03: 'yes', Day04: 'yes', Day05: 'yes', Day06: 'yes', Day07: 'yes', WeeklyWeather: 'rain', MonthlyWeather: 'rain' }
];

$("#tableid").append("<tr><td> Product </td> <td >12/09</td> <td>13/09</td> <td>14/09</td><td>15/09</td><td>16/09</td><td>17/09</td><td> Current </td><td> Weekly </td><td> Monthly </td></tr>");
for (var i = 0; i < result.length; i++) {
    $("#tableid").append("<tr><td>" + result[i].product + "</td><td><img src='images/" + result[i].Day01 + ".png' /></td><td><img src='images/" + result[i].Day02 + ".png' /><td><img src='images/" + result[i].Day03 + ".png' /></td><td><img src='images/" + result[i].Day04 + ".png' /></td><td><img src='images/" + result[i].Day05 + ".png' /></td><td><img src='images/" + result[i].Day06 + ".png' /></td><td><img src='images/" + result[i].Day07 + ".png' /></td><td><img src='images/" + result[i].WeeklyWeather + ".png' /></td><td><img src='images/" + result[i].MonthlyWeather + ".png' /></td></tr><tr class='expandable'><td colspan='10'><div>Expanded content</div></td></tr>");
}

$('#tableid').on('click', 'tr:nth-child(even)', function() {
  $(this).next().toggleClass('expand');
});

* {
  box-sizing:border-box;
}

table {
  border-spacing:0;
  border-collapse: collapse;
}

tr:nth-child(even) {
  cursor:pointer;  
}

tr:first-child {
  background:silver;  
}

tr:nth-child(4n+4) td {
  background: #ccc;
}

td {
  border:1px solid #3E3E3E;
  padding:5px;
}

.expandable div {
  transition: height, padding .3s ease;
  padding:0 10px;
}

.expandable:not(.expand) td {
  padding:0;
  border-bottom-color:transparent;
}

.expandable:not(.expand) div {
  height:0;
  overflow:hidden;
}

.expandable.expand div {
  padding:10px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<table id="tableid"></table>

http://jsbin.com/susohe/edit?html,css,js,output