3

我正在使用 jQuery 创建一个附加数据的表。当前创建的表如下。

https://www.dropbox.com/s/luhwbjz1aarxa3p/Selection_025.png?dl=0

我想再添加两个字段作为向下钻取。你能指导我如何做到这一点。

附加数据的代码。

 $("#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>");
 }
4

1 回答 1

1
  1. 为结果中的每个项目添加另一个 tr。把你想要的数据放在那里。
  2. 通过将内容的高度设置为 0 来隐藏这一行（用于切换动画。如果不需要动画，只需display:none在 tr 上设置。
  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,输出

于 2015-12-16T10:02:19.487 回答