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

Do you mean something like this http://www.jankoatwarpspeed.com/wp-content/uploads/examples/expandable-rows/? — Mosh Feu, Dec 15 '15 at 14:01
Of course. That's exact what I want. The problem is the table format I am using. I will have to change everything right? — Thilina Akalanka, Dec 16 '15 at 04:09
`I will have to change everything` - no you don't. You just need to add one more row for each result and put there the data that you want. If you will create a fiddle I will help you to set it. — Mosh Feu, Dec 16 '15 at 07:34
@Mosh I was able to append data to the table. But I can't add the div tag inside jQuery as bellow. — Thilina Akalanka, Dec 16 '15 at 08:47
`I can't add the div tag` why? `inside jQuery` What do you mean inside jQuery? Do you mean **using** jQuery? — Mosh Feu, Dec 16 '15 at 08:54
I use the jQuery code shown in the question to append data. Inside that I cant add the div tag. It gives an error. — Thilina Akalanka, Dec 16 '15 at 09:00

Mosh Feu · Accepted Answer · 2015-12-17T09:14:15.957

Add another tr for each item in the result. Put there data as you want.
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.
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

Thanks Mosh Feu that's exactly what I needed. But it does not hide the "Expanded Content". It still appears. when select the row it does change the padding that's it. How it can be fixed — Thilina Akalanka, Dec 17 '15 at 06:06
I don't understand. Do you mean in my answer or in your site? — Mosh Feu, Dec 17 '15 at 06:31
In my site. As image shows (ML is expanded after clicking the row. Without expanding it shows like CARBON. It actually never hides) https://www.dropbox.com/s/grp1c1yc02k3epm/Selection_026.png?dl=0 — Thilina Akalanka, Dec 17 '15 at 06:44
Tried it on both Firefox and google chrome. Got the same result. I am using HTML inside "<![CDATA[ ]]>". Is that the reason? — Thilina Akalanka, Dec 17 '15 at 07:08
I don't know what the effect of `<![CDATA[ ]]>` try to change this to a normal `html` tag and see if something change. Also try to change the doctype to `html5` (if it's different) http://www.w3schools.com/tags/tag_doctype.asp — Mosh Feu, Dec 17 '15 at 07:20
Can I have the full code within one HTML file. I know it's silly -_-. It will help me to find what I am doing wrong. — Thilina Akalanka, Dec 17 '15 at 09:12
Sure, you can enter to the [`jsbin` link](http://jsbin.com/susohe/edit?html,css,js,output) and click `file>download` — Mosh Feu, Dec 17 '15 at 09:16
Thanks. I can't understand what's wrong with it. It works fine outside <![CDATA[]]>. When it's Inside it doesn't work. The example you shared which is clean and very simple (http://www.jankoatwarpspeed.com/wp-content/uploads/examples/expandable-rows/) works fine as it is. But when I try to append data to the table it makes a mess :( . How can I append data to that table. Thanks again for your time. — Thilina Akalanka, Dec 17 '15 at 09:41
@MoshFeu Do you have any idea about [How to create jQuery Datatable Drill-down rows?](http://stackoverflow.com/questions/39991927/how-to-create-jquery-datatable-drill-down-rows) Thanks in advance... — Jack, Oct 12 '16 at 06:51

how to create Drill Down table rows

1 Answers1