如何创建向下钻取表行

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