Как создать строки таблицы сверла

Question

Я создаю таблицу, добавляющую данные, используя jQuery. В настоящее время создается таблица, как показано ниже.

Я хочу добавить еще два поля, как детализировать. Не могли бы вы посоветовать мне, как это сделать.

Код для добавления данных.

$("#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. Добавить еще тр для каждого элемента в результате. Поместите туда данные, как хотите.
2. Скрыть эту строку с помощью набора высоты запрещенного контента на 0 (Для переключения анимации. Если не нужна анимация просто установить display:none на тре.
3. При нажатии на tr код делать toggleClass() на следующей строке (расширяемый) и этот класс удалить height:0 и выставляет содержание.

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