如何创建向下钻取表行

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. 为结果中的每个项添加另一个tr。把数据放在你想要的地方。
2. 通过将内容的高度设置为0来隐藏此行（对于切换动画。如果不需要动画，只需在tr上设置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